@Input和@Output 父子組件傳值

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