标签：12px div 选择 bin options init inpu sub scom
父子组件数据传递
例如：一个下拉框的列表数据 options 来自父组件。
子组件代码：
子组件代码：
父组件代码：
子组件中使用 @output + EventEmitter 定义一个可以对外的带参事件，并在子组件内部的适当时机去触发这个事件 this.search.emit(val)，
父组件在使用子组件时，可以将子组件中定义的事件绑定到自己的内部函数。
子组件通过 @output 定义的event， 使用上等同于html 基本元素的 click 事件，都可以通过 （eventname）的形式进行事件绑定。
同级组件数据传递
没有包含关系的两个组件，如果想进行数据传递，根据业务要求的不同，可以自行选择子父父子参数续传，或者是通过 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
|
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 中注销监听（避免内存泄漏）
注意：
如果不需要不同组件间事件的触发，就不需要注册监听，直接在数据服务中提供一个数据访问方法，由数据消费组件调用即可
标签：12px div 选择 bin options init inpu sub scom
原文地址：https://www.cnblogs.com/crdanding/p/12026965.html
