如何在没有 [innerHTML] 的情况下显示段落中的链接

Question

我有一个用 html links 替换文本 links 的管道，我将 link 放在带有 [innerHtml] 的段落中。 innerHTML 的问题在于，如果有人键入类似“a”的任何内容都不会显示其后的所有文本

这是管道：

export class GenerateLinksPipe 实现 PipeTransform { 转换（值：字符串，aClass？：字符串）：字符串{

// http://, https://, ftp://
const urlPattern = /\b(?:https?|ftp):\/\/[()a-z0-9-+*&@+#\/%?=+_~_|!:,.;]*[a-z0-9-+&@#\/%=_~_|]/gim;

// www. sans http:// or https://
var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

// Email addresses
var emailAddressPattern = /^[a-zA-Z0-9.!#$%&'*+=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/;

return value
  .replace(urlPattern, `<a href="$&" target="_blank">$&</a>`)
  .replace(pseudoUrlPattern, `<a href="http://" target="_blank"></a>`)
  .replace(emailAddressPattern, `<a href="mailto:$&" target="_blank" >$&</a>`);

} }

我需要一种方法来显示段落中的 link，但能够毫无问题地使用“<”和“>”字符。

Answer 1

在使用Angular时生成HTML是错误的做法。 Angular 背后的整个想法是你停止思考“如何操纵 HTML”；相反，我们有一个 model 并且我们定义了这个模型如何映射到 view -- 这是你的 Angular 模板。

而不是对字符串执行操作并得到 HTML

foo www.bar.com baz    =>    foo <a href="#">bar</a> baz

您应该执行一个操作，为您提供文本的模型。

foo www.bar.com baz   =>   [ { type: 'text', value: 'foo ' },
                             { type: 'link', href: '#', value: 'www.baz.com' },
                             { type: 'text', value: ' baz' } ]

这在客观上是一种更好的方法，因为它将您的业务逻辑（什么是 link？）与 representation/view 层（我想如何表示它）分开。您现在可以构建 HTML、XHTML、Markdown 或您想要的任何内容。它还可以避免您描述的问题（如果字符串已经包含 HTML 特定字符怎么办）。

这里你需要的是一个基于这个模型的Angular模板。注意Angular模板是不是HTML！当您在 Angular 中编写模板时，编译器 (ngc) 会将那个字符串（您的模板）转换为一系列 JavaScript 函数，这些函数操作 DOM.

要创建您需要的内容，您可以执行以下操作。

<ng-container *ngFor="let chunk of parsedData">
  <ng-container [ngSwitch]="chunk.type">
    <ng-container *ngSwitchCase="'text'">{{ chunk.value }}</ng-container>
    <a *ngSwitchCase="'link'" [href]="chunk.href">{{ chunk.value }}</a>
  </ng-container>
</ng-container>

如何在没有 [innerHTML] 的情况下显示段落中的链接

How to display links un a paragraph without [innerHTML]

html

javascript

pipe

typescript

angular