Angular 2 — Как получить ссылочную переменную шаблона или экземпляр директивы внутри компонента

В этом посте давайте посмотрим, как получить экземпляр директивы/дочернего компонента Angular 2 внутри класса родительского компонента.

ViewChild в действии

Для выполнения этого требования можно использовать декоратор ViewChild.
ViewChild принимает либо тип директивы, либо ссылочную переменную шаблона в качестве аргумента и устанавливает экземпляр директивы в целевое свойство после представления. инициироваться.

@Component({
  selector: 'child-cmp',
  template: 'child'
})
class ChildCmp {
  doSomething() {}
}
@Component({
  selector: 'some-cmp',
  template: '<child-cmp></child-cmp>',
  directives: [ChildCmp]
})
class SomeCmp {
  @ViewChild(ChildCmp) child:ChildCmp;
  ngAfterViewInit() {
    // child is set
    this.child.doSomething();
  }
}
}

ViewChild установит целевое свойство после визуализации представления компонента, поэтому доступ к свойству до того, как представление будет инициировано, вернет недопустимый результат.

Вы можете использовать хук жизненного цикла ngViewAfterInit, чтобы идентифицировать инициализацию представления.

Аргумент в качестве типа директивы и переменная шаблона
Использование аргумента в качестве переменной шаблона ViewChild лучше всего с моей точки зрения, поскольку он обеспечивает доступ к конкретному экземпляру директивы при наличии более одной директивы в шаблоне.

@Component({
   selector: 'some-cmp',
   template: '<child-cmp #child></child-cmp>',
   directives: [ChildCmp]
})
class SomeCmp {
   @ViewChild('child') child:ChildCmp;
   ngAfterViewInit() {
    // child is set
    this.child.doSomething();
   }
}

Удачного сценария..