Question

我以这种方式在我的角度应用程序中创建了一个自定义简单指令：

import { Directive, OnInit, ElementRef } from '@angular/core';

@Directive({
  selector: '[testDirective]'
})
export class TestDirective implements OnInit {

  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    console.log('directive works');
    this.elementRef.nativeElement.style.backgroundColor = 'red';
  }

}

我已通过以下方式在app.module.ts中声明了它：

import { TestDirective } from './shared/component/tree/test.directive';

@NgModule({
  imports: [
    ...
  ],
  declarations: [TestDirective,...]
 ...
})
...

最后是我在模板中使用此指令的方式：

<p testDirective>This is just for example</p>

我希望在浏览器控制台中看到directive works，并且<p>的背景颜色也会变为红色。但是它们都不起作用，也没有任何错误。只是指令不起作用！我不知道出什么问题了。我的代码有什么错误吗？

请注意，我的项目使用的是7.2.12版的angular。

Answer 1

对于任何可能遇到相同问题的人，如 JB Nizet 在评论中所说，问题是我正在使用其他模块的指令。我将声明从app.module移到了相关模块，现在可以正常使用了。

感谢所有对我有帮助的人 JB Nizet 的有益帮助。

Angular自定义指令没有任何作用

1 个答案: