Angular元件——父元件呼叫子元件方法

starof發表於2018-04-02
Angular元件

viewChild裝飾器。

父元件的模版和控制器裡呼叫子元件的API。

1、建立一個子元件child1裡面只有一個greeting方法供父元件呼叫。

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

}
View Code

2、父元件中分別在模版中用模版本地變數呼叫和在控制器中用ts程式碼呼叫。

父元件寫2個<app-child>並分別指定模版本地變數

<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>

3，在父元件控制器中宣告一個由viewChild裝飾器裝飾的變數獲得子元件的引用。

通過模版變數的名字child1找到相應的子元件並賦值給child1變數，拿到引用就可以呼叫子元件方法。

@ViewChild('child1')
child1:Child1Component; //父元件中獲得子元件的引用

ngOnInit(){
  this.child1.greeting("Tom");
}

4，在父元件模版中呼叫子元件方法。

在父元件模版中加一個button，點選時去呼叫子元件child2的greeting方法。

<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>
<button (click)="child2.greeting('Jerry')">呼叫child2的greeting方法</button>

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/8689908.html  有問題歡迎與我討論，共同進步。

相關文章