@viewchild для директивы всегда возвращает элемент ref вместо директивы reference-angular5

Question

В настоящее время я работаю над проектом, в котором мне нужно передать некоторые значения @input в зависимости от компонента.Так что директива будет работать соответственно.Но проблема в том, что я не смог получить ссылку на эту директиву.Вместо этого я получил взамен только elementRef.Пожалуйста, обратитесь к приведенному ниже образцу стекаблица для получения дополнительной информации.

https://stackblitz.com/edit/angular-feptw3

Answer 1

Существует несколько способов исправить это:

1) Использование опции read:

@ViewChild("myCustomDir", { read: MyCustomDirective}) myCustomDir: MyCustomDirective;

Пример

См. Также:

• Как получить ссылку на компонент, связанный с ElementRef в Angular 2

2) Использование exportAs

directive.ts

@Directive({
  selector: "[myCustom]",
  exportAs: 'myCustom'
  ^^^^^^^^^^^^^^^^^^^^
})
export class MyCustomDirective {
  ...
}

html

<h1 myCustom #myCustomDir="myCustom">
                           ^^^^^^^^

Пример

См. Также:

• Что такое атрибут #auto и почему он необходим