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

概述
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">