Question

我正在使用Ionic和Angular（typescript）中的聊天应用程序，它允许用户在其消息中使用[扰流器] [/扰流器]标签来将某些文本标记为潜在的扰流器，例如＆＃34; blah blah [剧透]宠坏了[/剧透]＆＃34;。现在，当我在我的应用程序中收到此消息时，我需要用按钮替换该剧透，该按钮将在单击时显示隐藏消息，并且该按钮应出现在消息中的此特定位置。消息存储在一个数组中，并使用ngFor在组件中显示该消息数组。每个传入的消息都只是添加到该数组中。

我解决这个问题的第一个尝试是简单地用html块替换部分字符串消息，例如<button (click)="revealSpoiler()">Spoiler</button>并在模板中使用[InnerHTML]来显示添加的html（使用声明的Pipe来允许安全的HTML）当然）。这样，按钮显示在我的组件中，但事件不起作用。我找到了一种方法来解决这个问题，只需使用ElementRef添加事件监听器，但是如果你意识到可以有多个这样的扰流板，它会感觉很乱，甚至更黑，所以现在跟踪它们我必须使用一些将变量递增为id。

所以我尝试将其作为组件注入。我按如下方式创建了SpoilerChild

import { Component, Input } from '@angular/core';

@Component({
  selector: 'spoiler',
  template: `<button *ngIf="isHidden; else reveal" (click)="revealSpoiler()">Spoiler</button>
              <ng-template #reveal>{{msg}}</ng-template>`
})
export class SpoilerChild {
  @Input() msg: string;
  isHidden: boolean = true;

  constructor() {
  }

  private revealSpoiler() {
    this.isHidden = false;
  }
}

然后我不是用按钮块替换[剧透] [/剧透]，而是使用<spoiler [msg]="spoilerPart"></spoiler>，其中spoilerPart是要显示的消息。但是在这种方法中，选择器不会被所需的组件替换（我相信Angular在运行时不会解析它）。

我考虑过使用ComponentFactoryResolver，但在所有示例中我发现这种方法依赖于类变量声明，例如

@ViewChild('spoiler', { read: ViewContainerRef }) spoiler:ViewContainerRef;

但在我的情况下，我的模板中没有扰流选择器，因为它是在从observable收到特定消息的情况下添加的。

所以我的问题是：当初始化时不知道注射部位时，我可以以某种方式注射我的子组件吗？或者是否有一些更好的解决方案来解决我的问题，这也是在角度架构中做这种事情的推荐方法？

Angular组件

0 个答案: