Angular 5 : Dynamic Templates

Question

Angular 5 removed the runtime compiler ，我的理解是，因此现在无法动态编译模板。

所以我需要想出另一种方法来完成我的需要；希望有人能指出我正确的方向。

我有一个用 Angular 编写的视频平台。人们可以对视频发表评论，并可以在评论中的某处添加时间戳，例如:

Great video! Maybe a bit more colour at 00:32, make it look more like 01:20?

I'm matching each timestamp using Regex, and attempting to add a call to the component in the timestamp link:

const exp = /\b[0-9]*\:[0-9]*\b/;
comment.commentText = comment.commentText.replace(exp, (match) =>
{
     return '<a href="javascript:void(0);" (click)="jumpTo(\'' + match + '\')">' + match + '</a>';
});

由于现在缺少编译自定义模板的功能，我该如何让它工作？

提前致谢

Answer 1

可以创建一个 TaggedCommentComponent ，它接受原始评论文本作为输入，对其进行解析，并创建一个交错文本和时间标签链接的数组，以您的示例为基础，它将是:

[
  'Great video! Maybe a bit more colour at ',
  '00:32',
  ', make it look more like ',
  '01:20',
  '?'
]

然后在此组件的模板中使用如下内容:

<ng-container *ngFor="let t of texts; let even=even">
  <ng-container *ngIf="even">
    <a (click)="jumpTo(t)">{{t}}</a>
  </ng-container>
  <ng-container *ngIf="!even">{{t}}</ng-container>
</ng-container>