angular 4 个组件目标（按选择器）

Question

我正在开发一个基于烤面包机通知的消息系统：

http://jasonwatmore.com/post/2017/06/25/angular-2-4-alert-toaster-notifications

我的问题很简单，我想扩展功能以允许多个警报组件可以在不同的模板中单独定位。

例如，根 app.component.html 模板将具有：

<alert root></alert>

子组件将具有：

<alert subcomponent></alert>

烤面包机教程（组件）的当前实现将以模板中警报组件的任何实例为目标。

如果有两个，调用服务时它们会收到相同的消息。

理想情况下，我想在服务调用中添加另一个参数：

this.alertService.success(message,target);

Answer 1

您可以在名为 target 的警报指令组件中使用字符串输入属性。

并且当 alert.service 触发警报时，组件仅在目标匹配时显示：

alert.component.ts

// add this input
@Input() target: string;

ngOnInit() {
    this.alertService.getAlert().subscribe((alert: Alert) => {
        // add this statament
        if (alert.target === this.target) {
            this.alerts.push(alert); 
        }
    });
}

alert.service.ts

/*each alert function recive an extra parameter for target, if you needed with a default value, "root" for example*/

root.component.html

<alert target='root'></alert>

other.component.ts

// calling an alert
this.alertService.success(
    message='operation success', 
    target='root'
)

angular 4 个组件目标（按选择器）

angular 4 component target by selector

messaging

alert

components

typescript

angular

alert.component.ts

alert.service.ts

root.component.html

other.component.ts