angular 初探之父子组件之间传递数据

当一个组件封装好后，却由于在组件里处理过多的数据，而这些数据每个使用这个组件的人都可能不同的时候，那么封装就是不合理的。

所以将更多的处理和数据的调用给与外部是很有必要的。

vue中通过属性和子组件事件的触发实现父子组件之间的通信，angular也是如此，只是写法略有不同。

// 子组件中

// son.ts
@Input() data: info[] = [];
@Output() tabSelected = new EventEmitter();
handlerSelected() {
this.tabSelected.emit(this.data[this.testIndex]);
}

son.html
<li *ngFor="let item of data; let i = index">
<a href="{{ item.link }}" (click)="handlerSelected(i)">
{{ item.title }}
</a>
<span *ngIf="i === testIndex" class="active"></span>
</li>

// 父组件中
// father.ts

menus: info[] = [
{ title: "衣物", link: "#" },
{ title: "鞋子", link: "#" },
{ title: "电脑", link: "#" },
{ title: "手机", link: "#" },
{ title: "电器", link: "#" },
{ title: "空调", link: "#" },
{ title: "水果", link: "#" },
{ title: "零食", link: "#" },
{ title: "农产品", link: "#" },
{ title: "汽车", link: "#" }
];
handlerTest(v: info) {
console.log(v)
}

// father.html

<app-root [data]= "menus" (tabSelected)="handlerTest($event)"></app-root>

对于父组件数据传输在子组件中使用

@Input() data: info

[data] = menus

子组件触发事件

// js
@Output() notify = new EventEmitter();

// 子组件中 html
<button (click)="notify.emit()">Notify Me</button>