元数据编辑器--（坑集锦）

概述
Angular中的输入输出是通过注解@Input和@Output来标识，它位于组件控制器的属性上方。
输入输出针对的对象是父子组件。我借鉴的博客地址：[https://segmentfault.com/a/1190000007890167]；
1.@input

先摆出来解决办法：

tableId;//定义变量    //点击父组件时将点击的当前表id用@input输入给子组件时，调用获取字段的方法，并将这个id传给获取字段的方法，这样获取的字段就是对应表id的字段了。 //@input父级到子级---set给这个变量赋值后 将会触发这个方法    @Input() set selectedTableId(_tableId){        this.getkeyListById(_tableId);  //通过id显示对应的字段界面        this.tableId = _tableId;//**赋值取到变量**selectedTableId传递过来的id(点击的当前表的id)    };

关键点：//点击父组件时将点击的当前表id用@input输入给子组件时，调用获取字段getkeyListById的方法，并将这个id传给获取字段的方法，这样获取的字段就是对应表id的字段了。

子页面@input输入父组件的id,通过设置的方法selectedTableId变量传递这个id(因为子组件获取字段时要用到这个id)

    @Input() set selectedTableId(tableId){//这里的selectedTableId是一个变量，既不是方法也不是值        this.getkeyListById(tableId);    };

项目摘取
父组件：
（1）父页面（data-modeling.html）的子组件

<component-table-detail [selectedTableId]="selectedTableId"></component-table-detail>;

（2）父页面的组件：（data-modeling.ts）
定义这个input属性：

//点击表，输出表的到子组件    selectedTableId;//定义变量    editTable(event):void{  //点击（click事件）表传递点击表的id        this.selectedTableId=event; //将id的值付给定义好的变量selectedTableId；        console.log('表id',event);    }

（3）子页面(table-detail.ts)输入（在构造器之前）从父组件传递过来的变量值：
重点在这里定义的方法selectedTableId（tableId）

 @Input() set selectedTableId(tableId){        this.getkeyListById(tableId);  //调用这个显示字段的函数（通过表id）    };....... //**1.通过从父组件传递过来的table---显示对应字段的方法**    getkeyListById(tableID){  //定义显示字段的函数（传递点击表的id值）        this.runtime.services.getkey.tableKeyById(tableID).subscribe(resp=>{            console.log('tableKeyById',resp);            this.tableKeys = resp.results;//获取到点击的当前表的字段的数组        },err=>{            console.log('没有找到您需要的值！',err);        })    }

2.**//保存表字段到对应的表里**//save()    tableKeySave(){        let keyName=this.validateForm.controls.field_name.value;        let keyDes=this.validateForm.controls.field_des.value;        let keyType=this.validateForm.controls.field_type.value;        let keyforginkey=this.validateForm.controls.field_foreginkey.value.id; //获取选择外键的id--关键        console.log("外键表id",keyforginkey);         console.log("this.tableId",this.tableId); //@input()通过变量**内部赋值**的方法取出来了当前点击的表id        this.runtime.services.savekey.tableKeySave(keyName,keyDes,keyType,this.tableId,keyforginkey).subscribe(resp=>{            console.log('tableKeySave',resp);            this.navCtrl.push('DataModelingView');        },err=>{            console.log('您的输入有误，请重新输入！',err);        })    }

（4）子组件的模板显示：

<tr nz-tbody-tr *ngFor="let tablekey of tableKeys">        <td nz-td>{{tablekey.name}}</td>        <td nz-td>{{tablekey.des}}</td>        <td nz-td>{{tablekey.genre}}</td>        <td nz-td>Y/N</td>    </tr>

2.@output(这里为摘抄上面的链接地址部分，因为我自己还没用过—哈哈哈哈~~~)
(1)子组件three-link.component.ts

1. 引入import {Component, OnInit, Output, EventEmitter} from "@angular/core";2. 定义输出变量export class ThreeLinkComponent {    province: string;    // 输出一下参数    @Output() provinceOut = new EventEmitter();       constructor() {        this.province = "陕西";    } }3. 事件出发，发射变量给父组件provinceChange() {    // 选择省份的时候发射省份给父组件    this.provinceOut.emit(this.province);}

父组件模板

<!--三级联动组件--><three-link (provinceOut)="recPro($event)"></three-link>

父组件

// 函数接受子函数传递过来的变量， 子函数中emit的时候触发这个函数。recPro(event) {   this.province = event;}

改浏览器图标，1.导入 2.将asserts/icon/favicon.ico

<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"><link rel="shortcut icon" type="image/x-icon" href="assets/icon/favicon.ico">