在HTML字符串中传递有角度的routerLink URL的最佳方法 [英] Best way to pass angular routerLink URL's in an HTML string

问题描述

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

I have a notification service in my angular app, typically you call it like

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

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

I'd like to have the ability to to pass app links in the messages as well, and I know I need to allow SafeHtml input, like this:

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.`
  )
);

在我的服务中，这是我的工作方式:

Over in my service, this is what I do with it:

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起作用，但是在某种程度上是可行的，但是显然并没有通过角度来解析HTML以使routerLink功能正常.实际输出到浏览器的HTML是:

---

So... to get to the point of this question! This only somewhat works in that the HTML gets though, but apparently it's not being parsed by angular to make the routerLink functional. The actual HTML output to the browser is:

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

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

however, it's not clickable since a link that's actually parsed by angular would output this HTML:

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

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

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

How can I get these links to work?

Am I even going about this in the correct way?

推荐答案

基于@cgTag的评论，我最终要做的是建议

This is what I ended up doing based on @cgTag's comment & suggestion

我有这个错误:

<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);
}

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

And in my service I have this:

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>

这篇关于在HTML字符串中传递有角度的routerLink URL的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！