本篇文章為大家展示了Angular中怎么通過父組件調(diào)用子組件，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：空間域名、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、三門網(wǎng)站維護、網(wǎng)站推廣。

1、創(chuàng)建一個子組件child1里面只有一個greeting方法供父組件調(diào)用。

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-child1',
 templateUrl: './child1.component.html',
 styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
 constructor() { }
 ngOnInit() {
 }
 greeting(name: string) {
 console.log("hello" + name);
 }
}

2、父組件中分別在模版中用模版本地變量調(diào)用和在控制器中用ts代碼調(diào)用。

父組件寫2個并分別指定模版本地變量

3，在父組件控制器中聲明一個由viewChild裝飾器裝飾的變量獲得子組件的引用。

通過模版變量的名字child1找到相應(yīng)的子組件并賦值給child1變量，拿到引用就可以調(diào)用子組件方法。

@ViewChild('child1')
child1:Child1Component; //父組件中獲得子組件的引用
ngOnInit(){
 this.child1.greeting("Tom");
}

4，在父組件模版中調(diào)用子組件方法。

在父組件模版中加一個button，點擊時去調(diào)用子組件child2的greeting方法。

 
 
調(diào)用child2的greeting方法

上述內(nèi)容就是Angular中怎么通過父組件調(diào)用子組件，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。