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