角形式状态验证器2
我正在尝试编写自定义表单验证器. 我有两个组件主体和选项.在"选项组件"中,我有复选框列表,并且想验证,每行都至少检查一个选项. 在选项组件上,我有验证方法,如果某些行无效,则将其发射到主组件中. 在主组件上,我有属性,该属性对此发言人做出反应.也有形式的验证器,该验证器应在此IsInvalid属性上做出反应: 但是在验证器内部,即使表单上的属性为true(反之亦然). 你能告诉我,我做错了什么? 我希望,当我在每一行上检查option1时,主形式的状态将是"有效的".但是在控制台日志中,我看到了: options component: is INvalid: false main form - isInvalid: false validator: is invalid: true ,即使我将
如果使用*ngIf删除一个子组件,Angular自定义clickaway监听器会被触发。
我有一个单击的侦听器作为使用@HostListener放在App.component.ts 上的指令 @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent { constructor(private clickaway: ClickawayService) {} @HostListener("document:click", ["$event"]) documentClick(event: any): void { this.clickaway.target.next(event.target); } } @Directive({ selector: "[clickaway]", }) export class Clicka
22 2024-02-25
编程技术问答社区
angular 4: *ngIf有多个条件
我有点困惑.如果结果有几种情况之一,我需要隐藏块.但似乎它无法正常工作... {{message}} 它只是在其他条件下出现.它既不工作1条件也不适合2.也尝试了*ngIf="currentStatus !== ('open' || 'reopen') ",但仅适用于1个情况. 解决方案 除了冗余)此表达式始终是true,因为currentStatus始终匹配这两个条件之一: currentStatus !== 'open' || currentStatus !== 'reopen' 也许您的意思是 之一 !(currentStatus === 'open' || currentStatu
10 2024-02-25
编程技术问答社区
如何以最有效的方式提取ViewContainerRef和ComponentRef?
我与Angular-Material Mdsidenav一起工作,并希望通过编程方式打开并插入自定义组件. 我使用@ViewChild('varName')提取componentInstance,然后@ViewChild('varName', {read: ViewContainerRef})提取容器,以放置我的内容. 所以,我的问题是 - 可能只有1个@viewchild,并从提取的参考中获取其他信息. 第二个问题 - 允许读取属性的哪些值? ElementRef/viewContainerRef/...? 更新: 我发现,Mdsidenav的ViewContainerRef对于我的组件不正确.如何将组件放置在mdsidenav hostview中? 中 解决方案 可能只有1 @viewchild并从提取的 参考. 不,您无法为一个属性指定多个读取类型.例如,您在html中指定以下内容:
8 2024-02-25
编程技术问答社区
有条件地应用一个指令
我正在使用材料2添加md-raised-button.我只想在某些条件变为真时才应用此指令. 例如: 另一个示例: 我在Plunker中创建了一种基本的动态反应形式. 我正在使用formArrayName反应性形式的指令作为对照阵列. 我只想在特定条件变为真时仅应用formArrayName指令,否则不要添加formArrayName指令. 这是 plunker link . 解决方案 我不知道您是否可以根据条件应用指令,但是A 解决方案将使用 2按钮,并根据条件显示它们. 编辑:也许 会有所帮助. 其他解决方案 如果您只需要添加一个属性即可触发CSS规则,则可以使用以下方法:(这不
如何在angular 2的网格中使用flex layout和md-card?
我正在使用"@angular/core":" 2.4.10"和"@angular/材料":" 2.0.0-beta.2".我已经使用NPM安装了Flex-Layout.我想用卡设计响应式网格.我正在使用MD-Grid-List和MD卡.如何将Flex布局与MD-Card或MD-Grid-List一起使用.网格和卡应根据窗口/屏幕尺寸响应.预期结果:一旦我减少屏幕尺寸,应减少列数,并且当屏幕尺寸大时,列的数量应增加,而不会重叠卡中的内容. 解决方案 这是示例代码,可能有用 angular 2材料和弹性路线 此示例代码对我有用.
指令将ng-model的输入值显示为angular中的货币
我想在输入字段中显示具有小数值的货币标志.如果将模型值设置为2,则应显示$ 2.00,而模型值应保持数字.我已经创建了一个执行此操作的指令,但是如果从模型中设置值的服务器中的负载值,则它显示$ 2.00,并且在我需要数字时也是字符串. 1.如何在Angular 2中转换它?我需要完全相同的行为:我的指示是: import { Directive,Renderer,ElementRef,OnInit,Input,Output,EventEmitter,HostListener} from '@angular/core'; import {NgModel} from '@angular/forms'; declare var $: any; @Directive({ selector: '[appUiCurrencFormatter]', providers: [NgModel], host: { '(ngModelChange)' : 'onInputChan
8 2024-02-25
编程技术问答社区
Angular 2/4:如何使用指令检查输入值的长度?
我已经创建了一个可以验证输入的自定义属性指令,它具有值.请参阅下面的代码. 我不知道为什么如果条件不起作用,在台中.log它仅显示0.我的代码有什么问题吗? 我也尝试了其他Angular的应用程序生命周期事件. 谢谢! import { Directive, ElementRef, Input, AfterContentInit ,Renderer } from '@angular/core'; @Directive({ selector: '[inputfocus]' }) export class InputFocusedDirective implements AfterContentInit { public valLength; constructor(public el: ElementRef, public renderer: Renderer) {} ngAfterContentInit() { v
10 2024-02-25
编程技术问答社区
Angular 2指令现在是 "可扩展的 "吗?
我在Angular 1中遇到的最大问题是(从对象的意义上)扩展有多么困难. 例如,在我的一个自定义小部件上重复使用input[number]指令,我不得不重新实现所有验证和键入转换代码. Angular 2组件是作为类实现的,因此似乎很容易扩展.但是,他们还具有非常具体的选择器等的@Component注释,这使我不清楚它们是否可以完全覆盖. 那么Angular 2指令实际上是可扩展的吗? 编辑: 好吧,"可扩展"不必扩展课程.它可以创建由多个现有指令组成的新指令.我使用这种方法的问题是应用儿童指令的机制是什么? (@Component类不是传统的OO类,它的方法可以派往孩子.它只是一个完全由注释背后的任何驱动的字段和回调集装箱.) ) 解决方案 注释是不是继承的,因此,如果您有: @Directive({ selector:'foo', inputs:['bar'] }) export class Foo {} /
18 2024-02-25
编程技术问答社区
在Angular 2组件中,'controllerAs'指令的类似属性是什么?
我开始将我的Angular 1指令之一迁移到Angular 2组件. 我目前正在使用的指令具有controllerAs: 'ctrl'属性,并且该指令的模板使用'ctrl.'访问属性时的前缀. 查看官方componentMetadata doc 我做看不到任何可以使用的属性而不是该属性. 解决方案 在Angular 2中没有等效于controllerAs.例如,给定此控制器类和模板: @Component({ selector: 'component-a', template: ` Component A: {{counter}} ` }) export class ComponentA { counter = 0;
66 2024-02-24
编程技术问答社区
在Angular中全局性地注册一个指令
我正在开发一个角度应用.我需要为所有链接添加特殊行为.在Angularjs中,只会编写这样的指令: angular.module('whatever.module', []).directive('href', function() { return { restrict: 'A', link: function($scope, $element, $attrs) { // do stuff } }; }); 在Angular中,我可以写这样的指令: @Directive({ selector: '[href]', }) export class MyHrefDirective { constructor() { // whatever } } 但是,我该如何告诉应用程序在全球使用该指令?我有很多意见,上面有链接.我是否必须将其导入并在每个
8 2024-02-23
编程技术问答社区
如何在Angular 2中对一个指令进行单元测试?
问题:我希望能够在Angular 2中测试指令以确保其正确编译. 在Angular 1中,可以使用$compile(angular.element(myElement)服务,然后致电$scope.$digest().我特别希望能够在单元测试中执行此操作,以便我可以测试当Angular最终在my-attr-directive编译的代码中跨越 时. 约束: 使用JavaScript 的角度2.所有相关的所有来源似乎都需要TS. 茉莉花中的单位测试 一定不会那么骇客,以至于我的单位测试最终会破裂.请参阅 解决方案 使用测试床 测试指令 假设您有以下指令: @Directive({ selector: '[my-directive]', }) class MyDirective { public directiveProperty = 'hi!'; } 您要做的是创建一个使用该指令的组件(它可以是用于测试
16 2024-02-23
编程技术问答社区
Angular:如何使NgControl只对主机<input>的valueChanges做出反应?
我正在使用 - 元素上的指令,并获得这样的控件的引用: @ContentChild(NgControl) private readonly _inputNgControl: NgControl; 但是,当我听模型变更时: ngAfterContentInit(): void { this._inputNgControl.control.valueChanges .distinctUntilChanged() .subscribe(value => { // ... }); } 看来this._inputNgControl.control不是指指令坐在的输入,而是指我父母组件中的所有输入(其中包含多个带有同一指令的元素),因为我从所有内容中都有更改那些输入在父母中,不仅是我输入的内容. 那么,如何仅过滤仅活跃输入的ValueAgeange?我需要使用构造函数注入它,这会使NGContr
10 2024-02-23
编程技术问答社区
在Angular指令中使用CSS悬停属性?
这是指令,默认一个. import { Directive, Input, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[newBox]' }) export class BoxDirective { @Input() backgroundColor = '#fff'; constructor(private el: ElementRef, private renderer: Renderer2) {} ngOnInit(): void { this.renderer.setStyle(this.el.nativeElement, 'background-color', this.backgroundColor); } } 现在,在悬停的情况下,我希望背景色更改.我该如何在指令中执行此操作? 解决方案 使用HostListener来收听事件
12 2024-02-22
编程技术问答社区
Angular *ngFor是由一个单一的结构性指令构成?还是两个?
当我回答另一个问题时,我看到了一本书的屏幕截图,该书指出*ngFor(句法糖版本)是由两个结构指令制成的. 这是书中显示的代码: {{book.title}} 所以要么 Angular Guide 是错误的指出"结构指令易于识别.否则这本书是错误的.因为我在那里只看到一个星号. 所以我开始在Angular的NGFOR文档中进行挖掘.而且我找到了 this : 在此屏幕截图中,这本书的作者似乎是对的,[ngFor]和[ngForOf]都是(结构)指令. 所以现在我正在考虑这种情况. 也许就像两个(结构)指令: 第一个负责复制整个html元素并放置在ng-template标签中的 第二个负责复制ng-template内部元素的时间多了,因为它需要迭代并用所需的数据进行水化元素 这是我正在谈论的书的屏幕截图: 我很
12 2024-02-22
编程技术问答社区
当变化发生在Angular世界之外时,如何更新Angular 2 Reactive表单字段
我最近开始学习Angular 2,我正在努力理解我应该如何正确地将外界发生的变化与角度反应形式联系起来. 具体来说,我在以下示例中有一个问题: 我想创建一个指令,以通过Typeahead jQuery插件提供的自动完成功能增强输入.我的指示看起来如下: @Directive({ selector: '[myTypeahead]' }) class TypeAheadDirective implements AfterViewInit { constructor(private el: ElementRef) { } //this will be used as a parameter to source, it is not important for this example @Input() myTypeahead: string; ngAfterViewInit() { let source = new Bloodhound({
16 2024-02-22
编程技术问答社区
在Angular 4中使用指令检测点击外部元素
我已经使用自定义指令来检测到Angular 2中的元素之外的单击,但在Angular 4中是不可能的. [plunkr] https://plnkr.co/edit/akczvq?p=InfoFo 当我尝试在Angular-4中使用相同代码时,我会收到以下错误: 1. Argument of type '{ template: string; directives: typeof ClickOutside[]; }' is not assignable to parameter of type 'Component'. ==> @Component({ templateUrl: "", directives: [ClickOutside] }) 2. Type 'Subscription' is not assignable to type 'Observable'. in the directive in
16 2024-02-22
编程技术问答社区
检测指令中的输入值何时发生变化
我正在尝试检测指令中输入的 value .我有以下指令: import { ElementRef, Directive, Renderer} from '@angular/core'; @Directive({ selector: '[number]', host: {"(input)": 'onInputChange($event)'} }) export class Number { constructor(private element: ElementRef, private renderer: Renderer){ } onInputChange(event){ console.log('test'); } } 该指令中的问题是,它仅在有输入而不是当值在程序上更改时检测到.我使用重新形式,有时我将其设置
12 2024-02-22
编程技术问答社区
*ngif对布尔变化没有反应
这是一些代码.相同的模式(AFAIK)适用于英雄教程. login.component.html: Invalid credentials login.component.ts: wrongCredentialsInserted: boolean = false; //... onSubmit(login: LoginDto): void { console.log(`User '${login.username}' attempts to login...`); if (this.authService.login(login.username, log
20 2024-02-22
编程技术问答社区