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

Question

У меня есть вложенная ребенок компонент, как это:

<app-main> 
    <child-component /> 
</app-main> 

Мой appMain компонент должен вызывать метод на ребенка-компонента.

Как вызвать метод для дочернего компонента?

Answer 1

Вы можете получить ссылку на элемент с помощью

@ViewChild('childComponent') child; 

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

@ViewChild(ComponentType) child; 

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

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

get hold of an element in the template Смотрите также

Answer 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); 

Demo

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

Answer 3

Являясь составной SON

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

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

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

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

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

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

... 

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

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

Также можно создать template reference variables и получить доступ к ним через декоратор ViewChild.