Angular директива импортирована, но не работает должным образом

Question

Я использую angular версия 7.3.7. Я создал директиву, и она не работает должным образом. Пример директивы:

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

@Directive({
  selector: '[matchHeight]'
})
export class MatchHeightDirective implements OnInit {

  constructor() { }


  ngOnInit() {
    console.log("this will be work", "color: red");
  }

}

И импортируем мою директиву на shared.module.ts.

import { MatchHeightDirective } from './directives/match-height.directive';

const pipes = [DateFormatPipe, SecondToTime, HighlightSearch, TimeFormatPipe];
const components = [
  MatchHeightDirective,
];
@NgModule({
  declarations: [pipes, components],
  imports: [
    CommonModule,
  ],
  providers: [DraggableService],
  exports: [
    CommonModule,
    components,
  ],
})
export class QmsSharedModule {}

И используя ее как:

<div class="row" matchHeight></div>

Но результат ничего не работает , Что я делаю неправильно ? Любой совет для этого?

Answer 1

declarations: [pipes, components],

Поскольку каналы и компоненты уже являются массивами, ваше объявление теперь представляет собой массив с двумя массивами внутри.

Вы можете изменить его на:

declarations: [...pipes, ...components],

и должно работать.

Answer 2

Также экспортируйте трубы, директивы и компоненты в общий модуль

@NgModule({
  declarations: [...COMPONENTS, ...PIPES, ...DIRECTIVES],
  imports: [
    CommonModule,
  ],

  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  exports: [CommonModule, ...COMPONENTS, ...PIPES, ...DIRECTIVES]
})

И измените стиль для проверки

export class MatchHeightDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.color = 'red';
  }

Компонент. html

<p matchHeight>Color change </p>

Answer 3

Извлеките свои трубы и директивы из их массивов.