将超链接添加到 Angular 2 Toast 消息

Posted 2023-02-23

【中文标题】将超链接添加到 Angular 2 Toast 消息

【英文标题】：Add Hyperlink To Angular 2 Toast Message

【发布时间】：2018-08-22 07:44:29

【问题描述】：

我正在使用 Angular 2，我想知道是否可以向 toast 消息添加超链接。我在网上四处逛逛，看到了一些可能有用的东西，但我想知道是否有一种明确而简单的方法来实现这一点。谢谢！

编辑：或者如果有一种方法可以通过单击 toast 消息导航到不同的 url

【参考方案1】：

在 toast 中嵌入任何类型的 html 内容有两种不同的方法。

通过从angular2-toaster 导入BodyOutputType，您可以指定TrustedHtml 或组件。第一个允许您将 html 直接传递到 toast 的 body 参数中：

import  BodyOutputType  from 'angular2-toaster';

popTrustedHtmlToast() 
    var toast: Toast = 
      type: 'info',
      title: 'Here is a Toast Title',
      body: '<a target="_blank" href="https://www.google.com">Here is a Toast Body<a/>',
      bodyOutputType: BodyOutputType.TrustedHtml,
      showCloseButton: true 
    ;

    this.toasterService.pop(toast);

第二个允许您传递组件的名称。组件被动态加载并呈现为 toast 主体。

@Component(
  selector: 'custom-component',
  template: `<a target="_blank" href="https://www.google.com">Here is a Toast Body</a>`
)
export class CustomComponent  
@NgModule(
    bootstrap: [CustomComponent],
    declarations: [CustomComponent]
)
export class CustomComponentModule  

popComponentToast() 
    var toast: Toast = 
      type: 'info',
      title: 'Here is a Toast Title',
      body: CustomComponent,
      bodyOutputType: BodyOutputType.Component,
      showCloseButton: true 
    ;

    this.toasterService.pop(toast);

您可以在 plunker 中看到这两种方法。