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

Question

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

这是管道：

导出类 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, `$1<a href="http://$2" target="_blank">$2</a>`)
  .replace(emailAddressPattern, `<a href="mailto:$&" target="_blank" >$&</a>`);

} }

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

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' } ]

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

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

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

<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>