【Angular】@Input和@Output
发布时间:2020-12-17 08:35:29 所属栏目:安全 来源:网络整理
导读:该篇是上一篇的改编:【Angular】table假分页 【@Input和@Output】 @Input和@Output这两个要结合父组件与子组件来说 @Input:是 属相绑定 ,父组件向子组件传递数据 @Output:是 事件绑定 ,子组件向父组件传递数据的同时触发事件 【举例说明】 testtable是
该篇是上一篇的改编:【Angular】table假分页 【@Input和@Output】@Input和@Output这两个要结合父组件与子组件来说
【举例说明】testtable是父组件,datatable是子组件 //testtable.component.ts
export class TesttableComponent implements OnInit {
values = ["","#","First Name","Last Name","User Name","操作"];
attributeValues = ["id","FirstName","LastName","UserName"];
Users=[
{ id: 1,FirstName: 'wang',LastName:'shuang',UserName:'1' },{ id: 2,FirstName: 'li',LastName:'hua',UserName:'2' },{ id: 3,FirstName: 'zhao',LastName:'nan',UserName:'3'},{ id: 4,FirstName: 'niu',LastName:'qian',UserName:'4' },{ id: 5,FirstName: 'yan',LastName:'wen',UserName:'5' },{ id: 6,FirstName: 'liu',UserName:'6' },{ id: 7,FirstName: 'bai',LastName:'jing',UserName:'7' },{ id: 8,FirstName: 'an',UserName:'8'},{ id: 9,FirstName: 'wei',LastName:'yuan',UserName:'9' },{ id: 10,FirstName: 'kou',LastName:'ru',UserName:'10' },];
//页号
page:number;
//总记录数
total:number;
//页的大小
pageSize:number;
//总页数
totalPages:number;
constructor() { }
ngOnInit() {
this.page=1;
this.pageSize=4;
this.total=this.Users.length;
this.totalPages=this.total/this.pageSize;
}
//el:选中的索引
doRealDelete(el:any){
for(let i=0;i<el.length;i++){
this.Users.splice(el[i]-i,1);
}
}
}
【注释】
//testtable.component.html
<app-datatable [titles]="values" [attribute]="attributeValues" [users]="Users" [page]="page" [pageSize]=pageSize [total]=total [totalPages]=totalPages (doDelete)="doRealDelete($event)">
</app-datatable>
【注释】
//testtable.module.ts
import { DatatableComponent } from '../datatable/datatable.component'; //导入子组件
@NgModule({
imports: [
CommonModule,FormsModule,RouterModule.forChild(TesttableRoutes)
],declarations: [TesttableComponent,DatatableComponent]
})
export class TesttableModule { }
【注释】
//datatable.component.ts 在上一篇上添加如下内容
export class DatatableComponent implements OnInit {
@Input() titles;
@Input() attribute;
@Input() users:string[][]=new Array();
@Input() page:number;
@Input() total:number;
@Input() pageSize:number;
@Input() totalPages:number;
@Output() doDelete= new EventEmitter<any>();
checked=new Array<boolean>();//是否被选中
constructor() {}
ngOnInit() {
}
//选中行
select(i:number,ckbox:HTMLInputElement){
this.checked[i] = ckbox.checked;
}
//删除选中行
deleteDatas(){
let isDelete = false;
//let ids = new Array<string>(); //存放选中的索引
let dataCount = new Array();
for (let j=0;j<this.checked.length;j++){
if(this.checked[j]){
dataCount.push(j); //选中的索引
isDelete = true; //标识有无选中的
}
}
if(!isDelete){
alert("请至少选中一条记录");
return;
}
this.doDelete.emit(dataCount);//给父组件选中的索引
}
//初始化,设为初始态都为false,未选中
disposeChecked(){
this.checked.length = this.users.length;
for (let i = 0; i < this.users.length; i++) {
this.checked[i] = false;
}
}
}
【注释】
<!--在上 一篇博客的基础上,在html上添加一个删除按钮 -->
<div>
<button (click)="deleteDatas()">删除</button>
</div>
@NgModule({
imports: [
CommonModule,FormsModule
],declarations: [DatatableComponent],exports:[DatatableComponent] //导出组件
})
【注释】
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |