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

Question

我正在尝试使用两个分离的angular2烤面包机来提醒两种通知。目前，我无法区分它们，也就是说，无论何时触发这两种类型的警报，都会出现2个通知。有两个组件-一个包含在另一个组件中，每个组件都有烤面包机容器。这两个烤面包机的主要区别是，主组件中的烤面包机没有烤面包机ID，因为我可能同时有几个烤面包机实例，而内部组件中的面包机有烤面包机Id。

请忽略任何拼写错误-代码是免费编写的，而不是复制的。

查看我的代码：主要组件Html：(第二个烤面包机位于应用程序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实例中镜像该toast ContainerId。

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
})
...

这允许您单独针对每个容器。

---

当您提供了明确的toast ContainerId时，您仍然可以通过从toast中省略toast ContainerID属性来瞄准所有容器：

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