2

Angular 5删除了运行时编译器，我的理解是，由于这个原因，现在不可能动态编译模板。

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

我有一个用 Angular 编写的视频平台。人们可以在视频上发表评论，并且可以在评论中的某处包含时间戳，例如：

很棒的视频！可能在 00:32 多一点颜色，让它看起来更像 01:20？

我正在使用正则表达式匹配每个时间戳，并尝试在时间戳链接中添加对组件的调用：

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>';
});

现在缺少编译自定义模板的能力，我怎样才能让它工作？

提前致谢

4

1 回答 1

2

可以创建一个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>
于 2017-11-09T00:21:14.180 回答