Лучший способ передать угловые URL-адреса routerLink в строке HTML - PullRequest
Новая
       46

Лучший способ передать угловые URL-адреса routerLink в строке HTML

0 голосов
/ 26 апреля 2019

У меня есть служба уведомлений в моем угловом приложении, обычно вы называете это как 

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>

Как я могу получить этиссылки на работу?

Я даже правильно говорю об этом?

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

Это то, что я закончил, основываясь на комментариях и предложениях @ 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>
0 голосов
/ 26 апреля 2019

Поскольку HTML не компилируется угловым компилятором, хорошего решения не существует. :)

Есть несколько хаков для достижения того, что вы хотите. Но они грязные и, возможно, небезопасные.

Одним из решений является создание директивы, которая находится на элементе хоста. Он отслеживает щелчки на хосте и предотвращает действие по умолчанию, если у выбранного элемента есть атрибут routerlink. затем он просто вызывает функцию router.navigate со значением атрибута routerlink.

Я подготовил быстрый пример на stackblitz: https://stackblitz.com/edit/angular-ttfwwg

...