Question

我有一个Movie组件，可以保存给定电影的信息，我希望用户对此电影发表评论，但是我想给他们提供工具，将某些评论标记为破坏者。我正在使用Markdown编辑器和解析器，以便用户可以设置其注释样式，并为扰流板创建了“ new”标签，例如：

“我昨天看了那部电影，真棒。* s *杀手是蒂姆！ * s * bla bla bla

所以这是我的问题，我可以包装“ * s *”中的内容并将其转换为html标签，并创建一个显示剧透的按钮。

<div class="spoiler" style='display:hidden'>The killer was Tim!! That was a good plot</div>
<button>Show Spoiler</button> bla bla bla

使用[innerHtml]，我可以使其与角度自定义单击绑定到按钮和其他东西上

但这是存档的最佳方法吗？在我看来，我要做的（并且不起作用）是将* s *标签替换为组件标签，例如 "<app-spoiler>...</app-spoiler>"，但要使用AOT编译器，我必须创建一个dinamic组件和一个dinamic模块来对此进行归档，如果影片有20条评论，那么我认为这在性能上不是很好，那将是我觉得一团糟。

我遇到的另一种解决方案是找到所有的剧透标签，并存储注释的一部分数组，例如

[{type: 'text', content:'Bla bla bla bla bla bla', {type:'spoiler', content: 'The spoiler text'}]

因此在我的模板中，我将遍历此数组，如果类型是破坏者，则显示<app-spoiler></app-spoiler>组件：

<ng-container *ngFor="let text of arrayOfTexts">
<ng-container *ngIf="text.type === 'text'">{{text}}</ng-container>
  <ng-container *ngIf="text.type === 'spoiler'"><app-spoiler>{{text}}</app-spoiler></ng-container>

您认为这真的是一个很好的解决方案吗？如果我必须实施更多的“标签”，我认为扩展此解决方案“很容易”，但我正在寻找建议。

非常感谢您

Answer 1

这是一个在线DEMO，您可以检查一下，这是您所需要的吗？

这是您尝试进行一些调整即可实现的代码。

<ng-container *ngFor="let text of arrayOfTexts">
<ng-container *ngIf="text.type === 'text'">{{text.content}} </ng-container>
<ng-container *ngIf="text.type === 'spoiler'">
    <app-spoiler [text]="text.content"></app-spoiler>
</ng-container>

在这里，我将SpoilerComponent与两个变量一起使用，我认为这会对您有所帮助。

export class SpoilerComponent  {
  @Input() text: string;
  isShown: boolean;
}

我使用isShown来隐藏剧透文字的初始内容，并在单击时显示剧透文字。

如果您还有其他需要，或者我的理解不同，请发表评论。

如何在Angular 6中解决此问题？

1 个答案: