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