如何在 2 个组件中显示 2 个分离的烤面包机

Question

我正在尝试使用 2 个分开的 angular2-toaster 来提醒 2 种通知。目前-我无法将它们分开-意思是-每当触发两种类型的警报中的每一种时-都会出现2条通知。有 2 个组件 - 1 个包含在另一个组件中，每个组件都有烤面包机容器。 2个烤面包机的主要区别在于主组件中的烤面包机没有任何toasterId，因为我可能同时有多个这个烤面包机的实例，而内部组件中的烤面包机有toasterId。

请忽略任何拼写错误 - 代码是徒手编写的 - 不是复制的。

查看我的代码：主要组件Html：（第二个烤面包机位于app-innerComp）

<toaster-container class="my-toaster-container" [toasterconfig]="toasterconfigForMainComponent"></toaster-container>
<app-innerComp></app-innerComp>

主要成分：

export class mainComponent
{
    constructor(private toasterService : ToasterService){}
    toasterconfigForMainComponent: ToasterConfig = new ToasterConfig({
            positionClass: 'toast-bottom-left',
            showCloseButton: true,
            tapToDismiss: false,
            preventDuplicates: true
        })
    popAlertForMainComponent()
    {
        let mainComponentToaster : Toast =  //Here I don't have toasterId on purpose because I may have few instances of this toaster on the same time
        { 
            type: "error",
            title: "outer component Alert",
            body: <some component as body>,
            timeout:<some variable>, 
            data: <some object>,
            toastContainerId: 2
        }
        let toastObject = Object.create(mainComponentToaster);
        this.toasterService.pop(toastObject);
    }
    
}

内部组件html:

<toaster-container class="my-toaster-container" [toasterconfig]="toasterconfigForInnerComponent"></toaster-container>

内部组件：

    @Component(
    {
        selector: 'app-innerComp'...
    })
    
    export class InnerComponent
    {
        toasterconfigForInnerComponent: ToasterConfig = new ToasterConfig({
            positionClass: 'toast-top-left',
            showCloseButton: true,
            tapToDismiss: false,
            preventDuplicates: true
        })
        
        constructor(private toasterService : ToasterService){}
        
        popAlertForInnerComponent()
        {
            let innerComponentToaster : Toast = 
            {
                toastId: "innerComonentToaster",
                type: "error",
                title: "inner component Alert",
                timeout:0,
                toastContainerId : 1
            }
            let toastObject = Object.create(innerComponentToaster);
            this.toasterService.pop(toastObject);
            
        }
    }
}

Answer 1

您已确定要在其中显示每个 toast 的目标容器，但尚未在每个容器各自的 ToasterConfig 实例中镜像 toastContainerId。

export class mainComponent
{
    constructor(private toasterService : ToasterService){}
    toasterconfigForMainComponent: ToasterConfig = new ToasterConfig({
            positionClass: 'toast-bottom-left',
            showCloseButton: true,
            tapToDismiss: false,
            preventDuplicates: true,
            toastContainerId: 2
        })
    ...

export class InnerComponent
{
    toasterconfigForInnerComponent: ToasterConfig = new ToasterConfig({
        positionClass: 'toast-top-left',
        showCloseButton: true,
        tapToDismiss: false,
        preventDuplicates: true,
        toastContainerId: 1
    })
    ...

这允许您单独定位每个容器。

当您提供明确的 toastContainerIds 时，您仍然可以通过从 toast 中省略 toastContainerId 属性来定位所有容器：

let multiContainerToast : Toast = 
{
    toastId: "innerComonentToaster",
    type: "error",
    title: "inner component Alert",
    timeout:0
}

如何在 2 个组件中显示 2 个分离的烤面包机

How to show 2 separated toasters in 2 components

angular

angular2-toaster