Angular8 发布与订阅 解决子组件与父组件传值问题

in angular with 0 comment

本文主要作用是解决子组件向父组件传值,Output()方法不适用得情况,也可以作为主流传值手段使用。
其他子父组件传值也可以通过浏览器的储存机制来处理,例如:sessionStorage, localstorage等来解决,不过比起订阅模式来说稍微有点复杂

首先是创建service服务
*注意:Angular8以下版本对于rxjs的引入位置可能不同。

import {Injectable} from '@node_modules/@angular/core';
import {Observable, Subject} from '@node_modules/rxjs';

@Injectable({
    providedIn: 'root',
})
export class ValueHandlerService{
    private handler: Subject<any> = new Subject<any>();
    private stateHandler: Subject<any> = new Subject<any>();

    constructor() {
    }
    
    // 用于发送信息
    send(message: any) {
        this.handler.next(message);
    }

    sendState(message: any) {
        this.stateHandler.next(message);
    }
    
    // 用于接收信息
    get(): Observable<any> {
        return this.handler.asObservable();
    }

    getState(): Observable<any> {
        return this.stateHandler.asObservable();
    }

}

配置生产者

export class UploadFastComponent implements OnInit {
    
    /* 注入服务 */
    constructor(private valueHandler: ValueHandlerService) {

    }

    ngOnInit() {
    }

    // 向服务里的发送方法传入需要发送的数据
    valuePasser(value: Value) {
       this.valueHandler.send(value);
    }

}

配置消费者

export class NoteComponent implements OnInit, OnDestroy {
    private handlerUnsub;

    constructor(private valueHandler: ValueHandlerService) {
        // 用一个类变量来接收返回的对象,用来在销毁component时取消订阅,否则会造成订阅重复获得数据的问题
        this.handlerUnsub = this.valueHandler.get().subscribe((message) => {
            // 此处是对于订阅内容的处理
        });
    }

    ngOnInit() {

    }

    ngOnDestroy(): void {
        // component销毁时取消订阅
        this.handlerUnsub.unsubscribe();
    }
}