Gọi một phương pháp của các thành phần con

Question

Tôi có một thành phần con lồng nhau như thế này:

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

phần appMain tôi cần phải gọi một phương thức trên con thành phần.

Cách gọi phương thức trên thành phần con?

Answer 1

Bạn có thể lấy một tham chiếu đến một yếu tố sử dụng

@ViewChild('childComponent') child; 

nơi childComponent là một mẫu biến <some-elem #childComponent> `hoặc

@ViewChild(ComponentType) child; 

nơi ComponentType là loại một thành phần hoặc chỉ thị và sau đó trong ngAfterViewInit hoặc trình xử lý sự kiện, gọi child.someFunc().

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

Xem thêm get hold of an element in the template

Answer 2

Cha mẹ và con có thể giao tiếp thông qua ràng buộc dữ liệu.

Ví dụ:

@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 tạo ra một tham chiếu đến thành phần trẻ và có thể được sử dụng trong mẫu hoặc được truyền cho hàm. Dữ liệu từ cấp độ gốc có thể được chuyển bởi ràng buộc [ ].

Answer 3

Là một thành phần con trai

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

    data: number = 3; 

    constructor() { } 

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

} 

Có một thành phần cha

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

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

Trong mẫu của người cha

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

Giải pháp này chỉ hoạt động cho một cá thể <son></son> trong mẫu chính. Nếu bạn có nhiều hơn một cá thể chỉ hoạt động trong mẫu đầu tiên.

Answer 4

Cách tốt nhất để truy cập thành phần con là @ViewChild.

Giả sử bạn có AppMainComponent với một ChildComponent lồng nhau từ ví dụ của bạn.

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

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

export class AppMainComponent {} 

Bạn muốn gọi phương thức rõ ràng từ ChildComponent của bạn.

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

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

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

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

Bạn có thể thực hiện nó bằng cách import lớp ChildComponent, ViewChild trang trí và vượt qua lớp thành phần trong nó như là một truy vấn. Bằng cách này, bạn sẽ có quyền truy cập vào giao diện ChildComponent được lưu trữ trong biến tùy chỉnh.Dưới đây là ví dụ:

// 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(); 
    } 
} 

Lưu ý! Chế độ xem con sẽ chỉ khả dụng sau ngAfterViewInit.

Trả lời sau khi Góc khởi tạo chế độ xem của thành phần và chế độ xem con. Được gọi một lần sau lần đầu tiên ngAfterContentChecked(). Móc chỉ có thành phần.

Nếu bạn muốn thực thi phương pháp một cách tự động, bạn cần thực hiện nó bên trong móc vòng đời này.

Bạn cũng có thể nhận được QueryList thành phần con thông qua trang trí ViewChildren.

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

... 

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

Danh sách truy vấn có thể rất hữu ích, ví dụ: bạn có thể đăng ký cho trẻ em thay đổi.

Cũng có thể tạo template reference variables và nhận quyền truy cập vào chúng thông qua trang trí ViewChild.