@Input和@Output 父子元件傳值
阿新 • • 發佈：2019-01-25
1.父子元件：@output和@input
(1)：@input:父到子
A:父頁面：data-modeling.html
<component-table-detail [selectedTableId]="selectedTableId" [selectedTabledes]="selectedTabledes"></component-table-detail>B:父元件：data-modeling.ts
import { Component, EventEmitter, Input, NgModule, Output } from '@angular/core' C:子元件：
@Input() selectedTabledes:string;
// @input父級到子級---set給這個變數賦值後 將會觸發這個方法
@Input() set selectedTableId(_tableId){
this.getkeyListById(_tableId);
this.tableId = _tableId;
};這樣，父級就像子級傳遞了selectedTabledes，selectedTableId這兩個變數。。。
這裡的selectedTableId是個變數（然後可以通過賦值取參，也可以方法呼叫傳參）
@Input() set selectedTableId(_tableId){
this.getkeyListById(_tableId); //通過id顯示對應的欄位介面
this.tableId = _tableId;//賦值取到變數selectedTableId傳遞過來的id(點選的當前表的id)
};(2)：@output：子到父
子元件：new-filed.ts
a:匯入import {Component,Input,Output,EventEmitter} from '@angular/core';
b:新增欄位傳值
@Input() tableKeys;//原來的陣列
@Output() OutTableKeys = new EventEmitter<any>();
c：向父元件傳遞新增之後de欄位
getkeyListById(tableId){
this.runtime.services.key.tableKeyById(tableId).subscribe(resp=>{
this.tableKeys = resp.results;
this.OutTableKeys.emit(this.tableKeys);///向父元件傳遞新增之後de欄位
},err=>{
console.log('沒有找到您需要的值！',err);
})
} d:父元件：table-detail.ts
//新增欄位父元件接受新增之後的表字段；
getData(data){
this.tableKeys=data;
}e:父頁面：table-detail.html
<component-new-field [tableKeys]="tableKeys" (OutTableKeys)="getData($event)"></component-new-field>這樣，父頁面就能接受到子頁面傳遞過來的值了。（這裡子元件向父元件傳遞了新增得欄位陣列。）
2.不同頁面之間：
頁面一：this.navCtrl.push(‘DataModelingView’,{appID:this.selectedAPPId});//通過APP的id開啟對應的表
editApp(event):void{
this.selectedAPPId=event;
console.log('APP的id',this.selectedAPPId);
this.navCtrl.push('DataModelingView',{appID:this.selectedAPPId});//通過APP的id開啟對應的表
}跳轉之後的頁面，獲取傳遞過來的引數appID：
//獲取app的id
if(this.navParams.get('appID')){
this.appID=this.navParams.get('appID');
console.log("拿到的id",this.appID);
}