logo标签列表

给 Angular 2 Toast 消息添加超链接

angulartoastsnackbarangular2-toaster
4
我正在使用Angular 2，想知道是否能够在toast消息中添加超链接。我在网上搜索了一些可能有用的内容，但我想知道是否有一种清晰明确且易于实现的方法。谢谢！
编辑：或者是否有一种通过单击toast消息导航到不同URL的方法。
1个回答
3

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

通过从angular2-toaster导入BodyOutputType，您可以指定TrustedHtml或Component。第一种方法允许您直接将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中看到这两种方法的应用。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接