代码之家 › 专栏 › 技术社区 › RyanIndustries8

阵列角度布线5

routing dynamic angular string arrays

-2

RyanIndustries8 · 技术社区 · 7 年前

我有一个动态内容的字符串数组,需要在其中为段落和链接添加路由和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."
    }
]

}

1 回复 | 直到 7 年前

Praveen Kumar 7 年前

我假设您正在尝试用new显示新内容。组成部分html。以下是您的操作方法:

在纽约。组成部分html:

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

创建新的管道保险柜。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}`);
}
}
}

注意:不要忘记将管道添加到应用程序模块中。

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前