Угловые пользовательские директивы не имеют никакого эффекта - PullRequest
Новая
       15

Угловые пользовательские директивы не имеют никакого эффекта

0 голосов
/ 07 июля 2019

Я создал собственную простую директиву в своем угловом приложении следующим образом: 

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.

1 Ответ

0 голосов
/ 07 июля 2019

Для тех, у кого может быть такая же проблема, как в комментариях JB Nizet , проблема в Я использую директиву из другого модуля . Я переместил объявление из app.module в связанный модуль, и теперь он работает.

Спасибо всем, кто помог мне особенно JB Nizet за его полезные комментарии.

...