如何顺序创建动态组件的多个实例？

Question

我有一个 SystemMessageService，它使用以下方法创建 SystemMessageComponent 的实例

createSystemMessage(message: string, vcr: ViewContainerRef, time: number = 4500, isErrorMessage: boolean = false, isWarningMessage: boolean = false, isSuccessMessage: boolean = false){
    let systemMessageCmpFactory = this.componentFactoryResolver.resolveComponentFactory(SystemMessageComponent);
    this.hostViewContainerRef = vcr;
    this.hostViewContainerRef.clear();
    this.systemMessageCmpRef = this.hostViewContainerRef.createComponent(systemMessageCmpFactory);
    this.systemMessageCmpRef.instance.message = message;
    this.systemMessageCmpRef.instance.timeUntilDestruction = time;
    this.systemMessageCmpRef.instance.isErrorMessage = isErrorMessage;
    this.systemMessageCmpRef.instance.isWarningMessage = isWarningMessage;
    this.systemMessageCmpRef.instance.isSuccessMessage = isSuccessMessage;
    this.closeSubMsg = this.systemMessageCmpRef.instance.closeMessage.subscribe(() => {
      this.closeSubMsg.unsubscribe();
      this.hostViewContainerRef.clear()
    })
  }

现在我在 SystemMessageService 中有一个通知程序，

private systemMessageNotifier$: Subject<string> = new Subject();
public systemMessageObs$ = this.systemMessageNotifier$.asObservable();
emitSystemMessage(systemMessage: string){
    this.systemMessageNotifier$.next(systemMessage);
}

它通知 app.component .ts 何时显示新的系统消息

@ViewChild('systemMessageHost', {read: ViewContainerRef}) systemMessageHost: ViewContainerRef;
  constructor(private systemMessageService: SystemMessagesService){

  }

  ngOnInit(): void {
    this.systemMessageService.systemMessageObs$.subscribe(systemMessage => {
      this.systemMessageService.createSystemMessage(systemMessage, this.systemMessageHost, 60*1000*60)
    })
  }

，但问题是如果按顺序发送，消息会重叠，例如，如果我在任何组件中调用以下内容，

this.systemMessageService.emitSystemMessage("Message1");
this.systemMessageService.emitSystemMessage("Message2");

我只会显示“Message2”，但我想显示“Message1”首先，如果用户关闭组件，然后应显示“Message2”。我将如何实施这个？ SystemMessageComponent 可以通过超时或单击关闭按钮来关闭。

Answer 1

我这样解决了：我使用一个变量来检查实例是否存在。如果存在，我将下一条消息推送到数组中。当实例被销毁时，我使用通知程序来通知 app.component 该实例已被销毁，以便如果有另一条消息，则可以显示下一条消息。

private systemMessageNotifier$: Subject<SystemMessage> = new Subject();
public systemMessageObs$ = this.systemMessageNotifier$.asObservable();
private sysMsgDestroyedNotifier$: Subject<any> = new Subject();
public systemMessageDestroyed$ = this.sysMsgDestroyedNotifier$.asObservable();

createSystemMessage(message: string, vcr: ViewContainerRef, messageType: SystemMessageType, noTimeOut: boolean = false, timeUntilDestruction: number = 1000*3600){
    let systemMessageCmpFactory = this.componentFactoryResolver.resolveComponentFactory(SystemMessageComponent);
    this.hostViewContainerRef = vcr;
    this.hostViewContainerRef.clear();
    this.systemMessageCmpRef = this.hostViewContainerRef.createComponent(systemMessageCmpFactory);
    this.systemMessageCmpRef.instance.message = message;
    this.systemMessageCmpRef.instance.timeUntilDestruction = timeUntilDestruction;
    this.systemMessageCmpRef.instance.messageType = messageType;
    this.systemMessageCmpRef.instance.noTimeOut = noTimeOut;
    this.closeSubMsg = this.systemMessageCmpRef.instance.closeMessage.subscribe(() => {
      this.closeSubMsg.unsubscribe();
      this.hostViewContainerRef.clear();
      this.sysMsgDestroyedNotifier$.next();
    })
  }

export class AppComponent implements OnInit {
  delayedSystemMessages = [];
  isSystemMessageComponentActive: boolean = false; 
  @ViewChild('systemMessageHost', {read: ViewContainerRef}) systemMessageHost: ViewContainerRef;
  constructor(private systemMessageService: SystemMessagesService){

  }

  ngOnInit(): void {
    
    this.systemMessageService.systemMessageDestroyed$.subscribe(() => {
      if(this.delayedSystemMessages.length > 0){
        this.isSystemMessageComponentActive = false;
        let message = this.delayedSystemMessages.shift()
        this.systemMessageService.emitSystemMessage(message);
      }
    })

    this.systemMessageService.systemMessageObs$.subscribe(systemMessage => {
      if(this.isSystemMessageComponentActive){
        this.delayedSystemMessages.push(systemMessage)
        return;
      }
      this.isSystemMessageComponentActive = true;
      this.systemMessageService.createSystemMessage(systemMessage.message, this.systemMessageHost, systemMessage.messageType, systemMessage.noTimeOut, systemMessage.timeUntilDestruction)
    })
  }
}