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