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

Ответ 1

Вы можете получить ссылку на элемент, используя

@ViewChild('childComponent') child;

где childComponent является переменной шаблона <some-elem #childComponent > `или

@ViewChild(ComponentType) child;

где ComponentType - это тип компонента или директивы, а затем в ngAfterViewInit или обработчики событий вызывают child.someFunc().

ngAfterViewInit() {
  console.log(this.child);
}

См. также получить элемент в шаблоне

Ответ 2

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

Пример:

@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 создает ссылку на дочерний компонент и может использоваться в шаблоне или передаваться функции. Данные от родителя могут быть переданы привязкой [ ].

Ответ 3

Будучи компонентом сына

@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> в родительском шаблоне. Если у вас есть несколько экземпляров, они будут работать только в первом шаблоне.

Ответ 4

Лучший способ доступа к дочернему компоненту - @ViewChild.

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

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

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

export class AppMainComponent {}

Вы хотите вызвать ясный метод из вашего 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 и класс компонента pass в нем в качестве запроса. Таким образом, у вас будет доступ к интерфейсу 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.

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

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

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

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

...

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

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

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