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

问题描述

我的 Angular 应用程序中有一个通知服务，通常你会这样称呼它

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

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

this.notificationsService.showError('错误！'，this.domSanitizer.bypassSecurityTrustHtml(`出了点问题，但你可以去主页重新开始.`));

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

showError(title: string, message: string | SafeHtml): void {const newNotification: INotification = {标题，信息，htmlMessage: typeof message !== 'string'};this.notifications.push(newNotification);}

然后我是这样展示的:

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

<小时>

所以...进入这个问题的重点！这只是在某种程度上起作用，因为 HTML 得到了，但显然它没有被 angular 解析以使 routerLink 起作用.浏览器的实际 HTML 输出是:

主页

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

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

如何使这些链接生效?

我的做法是否正确?

解决方案

这是我根据@cgTag 的评论而最终做的 &建议

在显示错误的我的页面上:

出了点问题，但您可以转到<a [routerLink]="['/home/accounts-list']">主页</a></ng-模板>

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

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

showError(title: string, message: string | TemplateRef): void {const newNotification: INotification = {标题，信息，messageAsTemplate: typeof message !== 'string'};this.notifications.push(newNotification);}

然后我是这样展示的:

<div class="toast-header"><strong>{{n.title}}</strong>
<div class="toast-body" *ngIf="!n.messageAsTemplate">{{n.message}}</div><div class="toast-body" *ngIf="n.messageAsTemplate"><ng-container [ngTemplateOutlet]="n.message"></ng-container>

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

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

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

And then I show it like this:

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

---

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>

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?

解决方案

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

on my page that shows the error I have this:

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

And then I show it like this:

<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屋！