1

我的 Angular 应用程序中有一个通知服务，通常你称之为

this.notificationsService.showError('My Title', 'My Message...');

我也希望能够在消息中传递应用程序链接，并且我知道我需要允许SafeHtml输入，如下所示：

this.notificationsService.showError(
  'Error!',
  this.domSanitizer.bypassSecurityTrustHtml(
    `Something has gone wrong, but you can go to <a routerLink="'/home/accounts-list'">home page</a> to start over.`
  )
);

在我的服务中，这就是我所做的：

showError(title: string, message: string | SafeHtml): void {
    const newNotification: INotification = {
        title,
        message,
        htmlMessage: typeof message !== 'string'
    };

    this.notifications.push(newNotification);
}

然后我像这样展示它：

<div class="toast" *ngFor="let n of notificationsService.notificationsList">
    <div class="toast-header">
        <strong>{{n.title}}</strong>
    </div>
    <div class="toast-body" *ngIf="!n.htmlMessage">{{n.message}}</div>
    <div class="toast-body" *ngIf="n.htmlMessage" [innerHTML]="n.message"></div>
</div>

所以……为了解决这个问题！这只是在某种程度上起作用，因为 HTML 得到了，但显然它没有被 angular 解析以使其具有routerLink功能。到浏览器的实际 HTML 输出是：

<a routerlink="'/home/accounts-list'">home page</a>

但是，它不可点击，因为实际上由 angular 解析的链接会输出以下 HTML：

<a routerlink="'/home/accounts-list'" ng-reflect-router-link="/home/accounts-list" href="/home/accounts-list">home page</a>

我怎样才能让这些链接正常工作？

我是否以正确的方式解决这个问题？

4

2 回答 2

1

这就是我根据@cgTag 的评论和建议最终做的事情

在我的页面上显示错误我有这个：

<ng-template #errorMessageTemplate>
    Something has gone wrong, but you can go to the <a [routerLink]="['/home/accounts-list']">home page</a>
</ng-template>

@ViewChild('errorMessageTemplate') errorMessageTemplate!: TemplateRef<NgTemplateOutlet>;


someMethod(): void {
  this.notificationsService.showError('Error!', this.errorMessageTemplate);
}

在我的服务中，我有这个：

showError(title: string, message: string | TemplateRef<NgTemplateOutlet>): void {
    const newNotification: INotification = {
        title,
        message,
        messageAsTemplate: typeof message !== 'string'
    };

    this.notifications.push(newNotification);
}

然后我像这样展示它：

<div class="toast" *ngFor="let n of notificationsService.notificationsList">
    <div class="toast-header">
        <strong>{{n.title}}</strong>
    </div>
    <div class="toast-body" *ngIf="!n.messageAsTemplate">{{n.message}}</div>
    <div class="toast-body" *ngIf="n.messageAsTemplate">
        <ng-container [ngTemplateOutlet]="n.message"></ng-container>
    </div>
</div>
于 2019-04-26T20:20:37.520 回答
0

由于 HTML 不是由 Angular 编译器编译的，所以没有好的解决方案。:)

有一些技巧可以实现你想要的。但它们很脏，可能不安全。

一种解决方案是创建一个位于宿主元素上的指令。如果单击的元素具有 routerlink 属性，它会监视主机上的点击并阻止默认操作。然后它只是使用 routerlink 属性的值调用 router.navigate 函数。

我准备了一个关于 stackblitz 的快速示例：https ://stackblitz.com/edit/angular-ttfwwg

于 2019-04-26T19:55:14.113 回答