Я использую библиотеку под названием ag-grid, которая позволяет мне создавать таблицу данных. В эту таблицу я включаю ссылку на профиль пользователя через routerLink.
Моя проблема в том, что, если пользователь недействителен в поиске, ссылка приведет вас к неверному профилю, поэтому я пытаюсь использовать другую ссылку для этой ситуации.
Я создал компонент, который генерирует ссылку так, как мне нужно, но он просто печатает HTML-код на странице.
Компонент:
import { Component, OnInit } from '@angular/core';
@Component({
template: "{{ link }}"
})
export class ViewLinkComponent {
params: any;
link: any;
agInit(params: any): void {
this.params = params;
// If we don't have an NTID, we can assume this is an invalid record
if (this.params.data.QID == '-') {
// Loop over our data object
for (var key in this.params.data) {
if (this.params.data.hasOwnProperty(key)) {
// If we are not looking at order and our values are not empty
if (key != 'order' && this.params.data[key] != '-') {
this.link = this.createLink(this.params.data[key]);
return;
}
}
}
}else{
this.link = '<a routerLink="/profile/'+ params.data.NTID +'">View Profile</a>'
}
}
createLink(query){
return '<a href="https://external.com/search?q='+query+'" target="_blank">Search</a>';
}
}
Конечный результат:
На изображении ниже показана правильная ссылка, но она не отображается в качестве действующей кликабельной ссылки.
Однако, если бы я сделал следующее, то получилось бы нормально:
@Component({
template: "<a routerLink='/profile/{{ params.data.NTID }}'>View Profile</a>"
})
Проблема в том, что мне нужно использовать некоторую логику, чтобы определить, является ли внутренняя ссылка маршрутом или внешней ссылкой.
Могу ли я сказать этому компоненту, что он может отрисовывать этот HTML, если он безопасен?