1

我正在尝试使用 2 个分离的 angular2-toasters 来提醒 2 种通知。目前 - 我无法将它们分开 - 意思是 - 每当触发 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);
            
        }
    }
}
4

1 回答 1

1

您已确定希望在其中显示每个 toast 的目标容器，但尚未在每个容器的相应实例中镜像该toastContainerId 。ToasterConfig

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
}
于 2021-01-06T14:41:48.263 回答