首先,确保您的Angular版本是9.x或更高版本。然后,您可以尝试以下解决方法:
@Directive
装饰器来定义指令,并确保指令类使用正确的命名约定。例如:import { Directive } from '@angular/core';
@Directive({
selector: '[appMyDirective]'
})
export class MyDirective {
// Directive logic here
}
import { Directive, Inject } from '@angular/core';
import { MyService } from './my-service';
@Directive({
selector: '[appMyDirective]'
})
export class MyDirective {
constructor(private myService: MyService) {
// Directive logic here
}
}
ElementRef
或Renderer2
等适当的工具进行访问。例如:import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appMyDirective]'
})
export class MyDirective {
constructor(private elementRef: ElementRef) {
// Access host element here
const hostElement = this.elementRef.nativeElement;
}
}
Renderer2
进行更改,而不直接操作DOM。例如:import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[appMyDirective]'
})
export class MyDirective {
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
// Change host element style here
this.renderer.setStyle(this.elementRef.nativeElement, 'color', 'red');
}
}
希望这些解决方法可以帮助您解决您的自定义指令问题!
上一篇:Angular 9 - Webpack在Chrome DevTools中是如何决定要监视哪些文件夹的?
下一篇:Angular 9 - 无法绑定到 'formGroup',因为它不是 'form' 的已知属性,即使已经导入了 FormsModule 和 FormBuilder。