Question

我的角度应用程序中有一个通知服务，通常您这样称呼

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起作用，但是显然不能通过角度解析来使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>

如何使这些链接正常工作？

我什至会以正确的方式解决这个问题吗？

Answer 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>

Answer 2

由于HTML不是由角度编译器编译的，因此没有好的解决方案。：）

有一些技巧可以实现您想要的。但是它们很脏并且可能不安全。

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

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

在HTML字符串中传递有角度的routerLink URL的最佳方法

如何使这些链接正常工作？

2 个答案: