组件交互
父子组件交互（常见）
输入输出属性 Input，Output
最基础的场景之一，使用非常广泛。使用方法，将父组件中的数据与子组件声明的变量进行绑定，保证子组件可以用于内部渲染模板，主要关注下子组件内部代码格式：
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-children',
templateUrl: './children.component.html',
styleUrls: ['./children.component.scss']
})
export class ChildrenComponent implements OnInit {
@Input() List: Array<any>;
constructor() { }
ngOnInit() {
}
}通过@Input 装饰器来声明这个变量是个输入属性，用于像dom那样绑定属性一样使用，但是有点区别：
当前总记录条数：{{dataList.length}}
<app-children [List]="dataList"></app-children>用 [ ] 符号与当前组件或者页面中的数据进行绑定。这种场景数据传输方向比较单一、简单，实际开发中更多的是子组件也会操作部分数据，父组件也要时刻接收到变化。
在Angular中，子组件传播事件需要从@angular/core中引入EventEmitter类，demo如下：
//组件内代码
@Output () removeHandler = new EventEmitter();
//组件模板中操作事件
removeAll(){
this.List = [];
this.removeHandler.emit(数据或者事件名称);
}模板：
<h4>子组件显示表格：</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of List">
<td>{{item.name}}</td>
<td>{{item.phone}}</td>
</tr>
</tbody>
</table>
<button (click)="removeAll()">清空全部</button>父组件：
<app-children (removeHandler)="removeData($event)" [List]="dataList"></app-children>removeData(e) {
console.log(e);
this.dataList = e; //如何将数据更新到本组件根据场景实现
}onChanges 生命周期截听输入属性变化
除此之外，官方demo中还提供了2种截听输入值的变化来更新本地数据，一种是对子组件绑定的属性进行getter和setter处理；另外一种用的蛮多的在开发中，利用组件的声明周期钩子 ngOnChanges 函数进行处理，上述demo我作下修改，子组件：
export class ChildrenComponent implements OnInit, OnChanges {
@Input() List: Array<any>;
changeList = [];
@Output() removeHandler = new EventEmitter();
constructor() { }
ngOnInit() {
}
ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
let logs = [];
if (!changes.List.firstChange) {
logs = changes.List.currentValue;
this.changeList = logs;
}
}
removeAll() {
this.changeList = [];
this.removeHandler.emit(this.changeList);
}
}<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of changeList">
<td>{{item.name}}</td>
<td>{{item.phone}}</td>
</tr>
</tbody>
</table>
<button (click)="removeAll()">清空全部</button>注意，本案例因我只绑定了一个输入属性，如果是多个，应当使用for循环更新指定的数据。
本地变量互动
官方定义：
父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法
子组件修改;
export class ChildrenComponent implements OnInit {
// @Input() List: Array<any>;
changeList = [];
// @Output() removeHandler = new EventEmitter();
constructor() { }
ngOnInit() {
}
addData(data) {
this.changeList = [...this.changeList, data];
}
removeAll() {
this.changeList = [];
}
}html模板不变；
父组件：
<h4>新增一条记录</h4>
<div class="basic-data">
<label>name：</label>
<input type="text" name="name" [(ngModel)]="name">
<label>phone：</label>
<input type="text" name="phone" [(ngModel)]="phone">
<button (click)="table.addData({name:name,phone:phone})">添加</button>
<button (click)="table.removeAll()">清除</button>
</div>
当前总记录条数：{{table.changeList.length}}
<app-children #table></app-children>export class BasicComponent implements OnInit {
constructor() { }
name = '';
phone = '';
ngOnInit() {
}
}组件内逻辑均删除，因为通过绑定的 #table 可以直接访问子组件属性和方法。
父组件调用@ViewChild
某些时候我们需要在组件中直接访问子组件内属性和方法，本地变量就不适用了，可以考虑使用 @ViewChild()
父组件修改：
<h4>新增一条记录</h4>
<div class="basic-data">
<label>name：</label>
<input type="text" name="name" [(ngModel)]="name">
<label>phone：</label>
<input type="text" name="phone" [(ngModel)]="phone">
<button (click)="addData()">添加</button>
<button (click)="removeAll()">清除</button>
</div>
当前总记录条数：{{dataList.length}}
<app-children></app-children>import { Component, OnInit, ViewChild } from '@angular/core';
import { ChildrenComponent } from '../children/children.component';
@Component({
selector: 'app-basic',
templateUrl: './basic.component.html',
styleUrls: ['./basic.component.scss']
})
export class BasicComponent implements OnInit {
@ViewChild(ChildrenComponent, { static: false })
private children: ChildrenComponent;
constructor() { }
name = '';
phone = '';
dataList = [];
ngOnInit() {
}
addData() {
this.dataList = [...this.dataList, {
name: this.name,
phone: this.phone
}];
this.children.addData({
name: this.name,
phone: this.phone
});
}
removeAll() {
this.dataList = [];
this.children.removeAll();
}
}如果子组件内有初始化操作的可以在父组件的AfterViewInit声明周期中初始化。
任意组件之间-服务（Service）
业务中比较多的交互往往不存在父子组件的关联，这时候使用服务交互是个不错的选择。
服务文件代码：
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class WorkerListService {
workList = [];
workListSource = new Subject<any>();
private workListSource$ = this.workListSource.asObservable();
constructor() { }
addInfo(info) {
this.workList = [...this.workList, info];
this.workListSource.next(this.workList);
}
updateWorkList(infos: Array<any>) {
this.workList = infos;
this.workListSource.next(this.workList);
}
}
解释下代码部分，首先一个数据可以被订阅的前提必须是一个Observable类型，对于普通数组 of(SomeArray) 已经是一个Observable类型可以订阅，对于返回的http请求也是个Observable类型，在页面中可以直接订阅处理，在Ng官方文档有列举Observable类型的说明，了解更多可以前往查看，next() 方法告知这个可观察对象更新内容，这样你的订阅（subscribe）才会抓取到更新后的信息。
原父组件：
import { Component, OnInit } from '@angular/core';
import { WorkerListService } from '../worker-list.service';
@Component({
selector: 'app-basic',
templateUrl: './basic.component.html',
styleUrls: ['./basic.component.scss']
})
export class BasicComponent implements OnInit {
constructor(
private workListService: WorkerListService
) { }
name = '';
phone = '';
dataList = [];
ngOnInit() {
this.workListService.workListSource.subscribe(res => {
this.dataList = res;
});
}
addData() {
this.workListService.addInfo({
name: this.name,
phone: this.phone
});
}
removeAll() {
this.dataList = [];
this.workListService.updateWorkList(this.dataList);
}
}
原子组件：
import { Component, OnInit } from '@angular/core';
import { WorkerListService } from '../worker-list.service';
@Component({
selector: 'app-children',
templateUrl: './children.component.html',
styleUrls: ['./children.component.scss']
})
export class ChildrenComponent implements OnInit {
changeList = [];
constructor(
private workListService: WorkerListService
) {
this.workListService.workListSource.subscribe(res=>{
this.changeList = res;
});
}
ngOnInit() {
}
}
这样就可以保证组件可以随时获取到最新的数据更新，而不用担心是否为父子级组件，也是最常用的方式。
