角度9 |指令中的ngModel Provider无法正常工作

Question

我有一个指令，它读取输入控件的脏状态并采取一些措施。

以下是指令的代码。

// our root app component
import { Directive, HostListener, Input } from '@angular/core';
import { NgModel, FormGroup } from '@angular/forms';

@Directive({
    selector: '[ngModel][appMarkAsDirty]',
    providers: [NgModel]
})
export class MarkAsDirtyDirective {
    @Input('appMarkAsDirty')
    parentFormGroup: FormGroup;

    constructor(private model: NgModel) { }

    @HostListener('ngModelChange', ['$event'])
    onInputChange($event) {
        console.log('this.model', this.model);
        if (this.model.dirty) {
            this.parentFormGroup.markAsDirty();
        }
    }
}

问题是，当用户在控件中键入内容时，指令中的ngModel引用不会更新。它始终保持在初始状态，即，值始终为null，并且控件始终被触摸为false，而脏触为false。

直到Angular 8都可以正常工作。而且，已停止在Angular 9中工作。

链接到stackblitz： https://stackblitz.com/edit/angular-ivy-yxbzny

谢谢！

Answer 1

我认为您必须从指令的声明中删除providers数组：

@Directive({
    selector: '[ngModel][appMarkAsDirty]',
    // providers: [NgModel]
})

这是因为，如果您有两个指令A和B并且它们应用在同一元素上，则可以在A中注入B ：

a.directive.ts

@Directive({
  selector: '[appA]'
})
export class ADirective {
  aDir = true

  constructor() { }

}

b.directive.ts

@Directive({
  selector: '[appB]'
})
export class BDirective {
  bDir = true

  // Assuming `A` and `B` are applied on the same element
  // Using `@Optional()` will not throw an error in case `A` is not applied
  constructor(@Optional() private a: ADirective) {
    console.log(this.a)
  }

}

ng-run demo

Answer 2

@manish我已经编辑了 stackblitz URL，请点击here

[