阵列Angular 5中的路由

Question

我有一个动态内容的字符串数组，我需要在其中为段落和链接添加路由和 HTML 标记。我似乎无法为这种路由或 HTML 的使用找到正确的术语。我错过了什么？

例子-

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
 selector: 'app-new',
 templateUrl: './new.component.html',
 styleUrls: ['./new.component.css']
})
export class NewComponent implements OnInit  {
new: object[];

constructor(private router: Router) {


this.new =  [
    {
      newtitle: "This is my title",
      newcontent: "Lorem ipsum dolor sit amet, <a (click)="newLink()">consectetuer</a> adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.<br>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat."
    }
]

}

Answer 1

我假设您正在尝试在 new.component.html 中显示新内容。以下是你可以做到的：

在 new.component.html 中：

<div [innerHtml]="new.newcontent | keepHtml: 'html'"></div>

创建一个新的管道 safe.ts：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';


@Pipe({ name: 'keepHtml', pure: false })
export class SafePipe implements PipeTransform {
constructor(private _sanitizer: DomSanitizer) {
}

public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
    case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
    case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
    case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
    case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
    case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
    default:
        throw new Error(`Unable to bypass security for invalid type: ${type}`);
}
}
}

注意：不要忘记将管道添加到您的应用模块。