Angular 8 组件间数据共享
父子组件数据传递
- 父级向子级传递对象: @Input
例如：一个下拉框的列表数据 options 来自父组件。
子组件代码：
import { Component, Input } from '@angular/core';
@Input() options: Array<string>;
在子组件中，可以自由使用 options 对象。
在 js 中通过 this.options 去访问列表数据
在 html 中 直接用 options 去访问
父组件中使用：
子组件一般直接在父组件的 html 中通过元素的形式添加进来，如
<app-search [options]="StatusStr"> </app-search>
options 是在子组件添加的对外属性，[options] 表示通过数据模型绑定到子组件的 options 属性上。StatusStr 是父组件（js文件）中定义的一个数据对象。
这样就实现了将父组件的数据传递给了子组件。
- 子组件向父组件触发事件 @Output, EventEmitter
子组件代码：
import { Component, Output, EventEmitter } from '@angular/core';
@Output() search = new EventEmitter<string>();
onSearch(keycode, val) {
if (keycode == 13) {
this.search.emit(val);
}
}
父组件代码：
HTML:
<app-search (search)="searchUsers($event)"></app-search>
JS:
searchUsers(val: string) {
this.searchKey = val;
this.getUsers(val);
}
子组件中使用 @output + EventEmitter 定义一个可以对外的带参事件，并在子组件内部的适当时机去触发这个事件 this.search.emit(val)，
父组件在使用子组件时，可以将子组件中定义的事件绑定到自己的内部函数。
子组件通过 @output 定义的event， 使用上等同于html 基本元素的 click 事件，都可以通过 （eventname）的形式进行事件绑定。
同级组件数据传递
没有包含关系的两个组件，如果想进行数据传递，根据业务要求的不同，可以自行选择子父父子参数续传，或者是通过 service。
这里介绍通过 service 实现两个组件间的事件触发及参数传递：
- 创建一个 service 专门用作各种情况下的 service 数据传递
////selected report private selectedReportSource = new Subject<any>(); SelectedReport$ = this.selectedReportSource.asObservable(); SelecteReport(index: any) { this.selectedReportSource.next(index); } |
selectedReportSource 用来保存选中的 report 唯一标志，SelectedReport$ 是一个选中 report 唯一标志的可订阅对象， SelecteReport（）方法用来修改选中的 report
- 在触发改变的组件内，调用数据改变方法
import { AllService } from "../../../services/all.service"; this.all.share.SelecteReport(tabIndex); |
import 定义数据服务的对象，通过服务方法改变选中的 report
- 在接收数据改变的组件内，监听 subject 对象
import { Component, OnInit, OnDestroy } from '@angular/core'; import { AllService } from "../../../services/all.service"; import { Subscription } from 'rxjs'; export class ReportsComponent implements OnInit, OnDestroy { subscription_selectReport: Subscription; ngOnInit() { this.subscription_selectReport = this.all.share.SelectedReport$.subscribe((x: number) => { this.ActiveTab = x; }); } ngOnDestroy() { this.subscription_selectReport.unsubscribe(); } } |
第一，引入数据服务 AllService
第二，添加组件的 OnDestroy， Subscription 引用
第三，定义一个 Subscription 对象，并注册监听 SelectedReport$.subscribe（），
第四，在 ngOnDestroy 中注销监听（避免内存泄漏）
注意：
如果不需要不同组件间事件的触发，就不需要注册监听，直接在数据服务中提供一个数据访问方法，由数据消费组件调用即可
