场景 - 共享弹出组件

前言

预备知识：该方法会用到 父组件和子组件通过服务来通讯

https://angular.cn/guide/component-interaction#parent-and-children-communicate-using-a-service

新建 facade dispatch 服务

💡

facade dispatch service 翻译：立面调度服务

import { DiscussCreateTopicComponent } from './../components/create-topic/create-topic.component';
import { ResponseData, UtilService } from '@atinc/ngx-styx';
import { Injectable, ViewContainerRef } from '@angular/core';
import { ThyDialogSizes } from 'ngx-tethys/dialog';
import { DiscussTopicInfo } from '../entities';
import { tap } from 'rxjs/operators';
import { Router } from '@angular/router';
import { ROUTE_PREFIX } from '../../../constants';
import { TopicStore } from '../stores';

@Injectable({
    providedIn: 'root'
})
export class TopicFacadeDispatcher {
    constructor(private util: UtilService, private topicStore: TopicStore, private router: Router) {}

    public openCreateTopic(options: { viewContainerRef?: ViewContainerRef } = {}) {
        this.util.dialog.open(DiscussCreateTopicComponent, {
            size: ThyDialogSizes.maxLg,
            viewContainerRef: options.viewContainerRef,
            initialState: {
                saveFn$: (topic: DiscussTopicInfo) => {
                    return this.topicStore.addTopic(topic).pipe(
                        tap((data: ResponseData) => {
                            this.router.navigateByUrl(`${ROUTE_PREFIX}/discuss/topics/${data.value.identifier}/posts`);
                        })
                    );
                }
            }
        });
    }
}

使用

import { TopicFacadeDispatcher } from '../../service/topic-facade-dispatcher';

...

@Component({
    selector: 'discuss-topics',
    templateUrl: './topics.component.html',
    providers: [StyxPilotScopeTypeNamePipe]
})
export class DiscussTopicsComponent implements OnInit, OnDestroy {
    @HostBinding('class') className = `${css.layout}`;


    constructor(