调用函数时全局显示HTML

Question

我正在尝试创建一个Notification Framework，它可以捕获错误并在遇到错误时显示弹出窗口，或者我需要抛出info / warning / success消息。 我的问题是当我调用组件来显示它没有出现的通知时。我相信这是因为我对HTML的了解有限。 我想知道如何在组件的其他部分html上显示通知。

此外，我正在使用ngx Bootstraps Alerts。从服务调用该组件，一切正常，直到我必须显示通知

通知HTML：

<div class="shared-notification" style="position:absolute; top:40px;">
<alert [type]='type' [dismissOnTimeout] = 'timeOut' [dismissible]="dismissible">
    {{ message }}
</alert>
</div>

通知组件类：

export class SharedNotificationComponent implements OnInit {

  type: string;
  message: string;
  dismissible: boolean;
  unrecoverable = null;
  timeOut: number;

  constructor() { }

  ngOnInit() {
  }
  displayNotification(notifType: string,
    notifMessage: string,
    dismissible: boolean,
    unrecoverable: boolean) {
    this.type = notifType;
    this.message = notifMessage;
    this.dismissible = dismissible;
    this.unrecoverable = false;
    this.timeOut = 5000;
    if (unrecoverable === true && notifType === 'danger') {
      this.unrecoverable = true;
    }
  }
}

我想我知道这个问题。这是在函数调用类之前加载html。意味着警报的所有值都是未定义的。当类中的值发生变化/何时调用SharedNotificationComponent.displayNotification时，如何重新设置html？

Answer 1

显示这样的组件的正确方法是在这种情况下采用父级的选择器“Shared-Notificaiton-Container”并将其插入要显示HTML的位置。