Question

我正在开发一个应用程序，以在出现中断或问题的情况下显示烤面包消息。

所以，我有一个父组件，即navbar组件。它具有确定应用程序状态的子组件（子组件）。而且子组件还有另一个子组件（孙子组件），用于显示敬酒消息。

具有将值传递给子级的逻辑的方法在导航栏的ngOnInit中调用，每5分钟调用一次。

我可以在应用程序加载时看到Toast消息...但是只要我导航到导航栏不存在的页面并返回该页面，它就会再次显示Toast。我想摆脱它。我希望仅在应用程序开始时显示一次吐司。 5分钟后，当另一个订阅进行时...值已更新，我没有遇到这个问题。但是在开始的5分钟内，出现了这个问题。

在应用程序启动时，我只需要显示一次烤面包。如果我离开该页面然后返回...我仍然希望将其隐藏。订阅后还需要显示其他消息，并且已经处理完毕。

导航栏组件。

    ngOnInit() {
            this.callMethod();
            this.interval = set Interval(()=> this.callMethod(), 300000);
    }

    callMethod() {
            // logic
            this.showToastOnLoad = true; // which is updated to false after 5 minutes
    }

导航栏组件html

     <child [show]='showToastOnLoad'></child>

子组件

    ngOnInint() {
             this.determineStatus();
    }

    ngOnChanges(changes: SimpleChanges) {
             // check for showToastOnLoad but happens after subscription
    }

    determineStatus() {
            if(this.showToastOnLoad === true) {
                       this.displayToast = true;
            }

子组件HTML

     <grandchild [display] = 'displayToast' ></grandchild>

GrandChild组件

      ngOnInit() {
             if(displayToast === true) {
                      setTimeout (
                         let element = document.getElementById('toast');
                         element.classList.add('hide');
                         , 3000);
              }

GrandChild组件HTML

       <div id='toast'> outage </div>

仅在应用程序开始时显示祝酒词

0 个答案: