调用函数时全局显示 HTML

Posted 2023-03-13

【中文标题】调用函数时全局显示 HTML

【英文标题】：Display HTML globally when function is called

【发布时间】：2018-04-12 18:08:50

【问题描述】：

我正在尝试创建一个通知框架，它可以捕获错误并在遇到错误或我需要抛出信息/警告/成功消息时显示弹出窗口。 我的问题是当我调用组件以显示它没有出现的通知时。我相信这是因为我对 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？？

【问题讨论】：

应该显示通知时控制台中是否有任何错误？

不，没有错误。它只是不显示。我已经通过添加警告内联测试了本地 html 文件的显示，它工作正常。

组件在哪里导入并放在页面上？了解更多应用程序结构会很有帮助。同样通常对于这样的事情，最好有一个触发通知的服务。

所以有一个服务可以在组件被触发时简单地调用它。组件未导入服务，然后使用我在组件中调用函数（displayNotification）的服务。

另外，我意识到这可能是因为页面加载时html加载并且警报未定义。当组件被调用并且调用变量的值发生变化时如何更新html？

【参考方案1】：

显示此类组件的正确方法是在本例中采用父级选择器“Shared-Notificaiton-Container”并将其插入到您要显示 HTML 的位置。