Angular组件中的动态子组件注入

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

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

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

回答(0)