父組件調用子組件 viewChild

父組件調用子組件

　　1.在子組件的ts中聲明一個變量

　　　　public  lineout:any="你好，我是被父組件調用的子組件"; 

　　2.在父組件的html中寫入 （引入子組件）　　　

　　　　<button (click)="parentsClick()">父組件點擊調用子組件</button>

　　　　<app-news  #news></app-news>

 

　　3.在父組件的ts中引入viewChild

　　　　import { Component, OnInit ,ViewChild} from '@angular/core';

 

　　4.在export class HomeComponent implements OnInit{}中聲明一個變量進行接收

　　　　@ViewChild("news",{static:false}) news:any;

 

　　5.在父組件中完成需要調用的事件

　　　　parentsClick(){

    　　　　console.log(this.news.lineout);

  　　　}

 子頁面：

 

 

 父頁面：

 

 

 

 

 

注釋：

• 在2中的引入引入子組件的時候給子組件一個標記#news，這個標記在父組件中進行變量接收的時候需要用的，如果接收變量有誤，不一致，就會出現問題
• 如果不在父組件中不寫一個接收變量的函數體，而是隨意寫在某個地方，就會報錯
• 在4中如果不給{static：false},在代碼中顯示中會報錯，但是在你打包的時候會報錯，同時你使用vsCode的時候，運行代碼的時候也會出現報錯