Вызов метода дочернего компонента

родитель и ребенок могут общаться через привязку данных.

пример:

@Component({
    selector: 'child-component',
    inputs: ['bar'],
    template: `"{{ bar }}" in child, counter  {{ n }}`
})
class ChildComponent{
    constructor () {
        this.n = 0;
    }
    inc () {
        this.n++;
    }
}

@Component({
    selector: 'my-app',
    template: `
        <child-component #f [bar]="bar"></child-component><br>
        <button (click)="f.inc()">call child func</button>
        <button (click)="bar = 'different'">change parent var</button>
    `,
    directives: [ChildComponent]
})
class AppComponent {
    constructor () {
        this.bar = 'parent var';
    }
}

bootstrap(AppComponent);  

демо

#f создает ссылку на дочерний компонент и может использоваться в шаблоне или передаваться в функцию. Данные от родителя могут быть переданы по [ ] привязка.

быть компонентом сына

@Component({
    // configuration
    template: `{{data}}`,
    // more configuration
})
export class Son {

  data: number = 3;

  constructor() { }

  updateData(data:number) {
    this.data = data;
  }

}

наличие компонента отца

@Component({
    // configuration
})
export class Parent {
  @ViewChild(Son) mySon: Son;

  incrementSonBy5() {
    this.mySon.updateData(this.mySon.data + 5);
  }
}

в шаблоне отца

<son></son>
<button (click)="incrementSonBy5()">Increment son by 5</button>

это решение работает только для одного <son></son>экземпляр в Родительском шаблоне. Если у вас есть более одного экземпляра будет работать только в первом из шаблона.

лучший способ получить доступ к дочернему компоненту, составляет @ViewChild.

допустим, у вас есть AppMainComponent с вложенным ChildComponent из вашего примера.

// app-main.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-main',
    template: `
        <child-component />
    `
})

export class AppMainComponent {}

вы хотите вызвать метод clear из вашего ChildComponent.

// child.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'child-component',
    template: '{{ greeting }}'
})

class ChildComponent {
    greeting: String = 'Hello World!';

    clear() {
        this.greeting = null;
    }
}

вы можете выполнить это, импортировав класс ChildComponent, viewchild decorator и передав класс компонента в нем в качестве запроса. Таким образом, у вас будет доступ к интерфейсу ChildComponent, хранящемуся в пользовательская переменная. Вот пример:

// app-main.component.ts
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './components/child/child.component';

@Component({
    selector: 'app-main',
    template: `
        <child-component />
    `
})

class ChildComponent {
    @ViewChild(ChildComponent)
    child: ChildComponent;

    clearChild() {
        this.child.clear();
    }
}

обратите внимание! Дочернее представление становится доступным только после ngAfterViewInit.

ответить после угловой инициализации представлений компонента и дочерних представлений. Вызывается один раз после первого ngAfterContentChecked(). Компонент-только крюк.

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

вы также можете получить QueryList дочерних компонентов через ViewChildren оформителя.

import { Component, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from './components/child/child.component';

...

@ViewChildren(ChildComponent)
children: QueryList<ChildComponent>;

QueryList может быть очень полезным, например, вы можете подписаться на изменения детей.

это также можно создать ссылочные переменные шаблона и получить доступ к ним через ViewChild декоратор.