Angular 路由器事件 NavigationEnd 未按预期触发 [英] Angular router event NavigationEnd not firing when expected

问题描述

我在 html 中有一个带有 * ngIf = "alertValue" 的警报，在 ts 中我有一个带有if"的函数，我希望当值变为true"时我可以激活我的警报

我试过了

html

<div class="alert alert-primary" role="alert">一个简单的主要警报——检查一下！

Ts

alertValue= false;this.router.events.subscribe(event => {如果(导航结束的事件实例){this.showNotif(this.router.getCurrentNavigation().extras.state);}});showNotif(数据:任何){控制台日志(数据)；如果(数据！== 未定义){this.alertValue=真；console.warn(this.alertValue);}}

在console.log (data);"中我恢复了我的值hello"，并且在 "console.warn (this.alertValue);" 我恢复了 "true"，这很好.

但是我的警报未在 html 中激活.我试图放置一个按钮，允许将true"传递给我的alertValue"并且我的警报激活

所以我了解如何在功能期间激活我的警报

如果你有想法，我很感兴趣

解决方案

你必须提前调用 router.getCurrentNavigation().extras.state.由于为时已晚，因此不会触发更改.

导航已经在 ngOnInit 中结束.尝试将其放入构造函数中.

//最早的生命周期构造函数(){this.router.events.subscribe(event => {如果(导航结束的事件实例){//订阅即将发生的 NavigationEnd}});}ngOnInit(){this.router.events.subscribe(event => {如果(导航结束的事件实例){//订阅已经结束的 NavigationEnd 所以它正在等待}});}

如果您需要更多帮助，请告诉我，同时解释更多有关您的代码的信息，我会关注这个问题.

I have an alert in html with a * ngIf = "alertValue",and in ts I have a function with an 'if' and I wish I could activate my alert when the value goes to "true"

I tried

html

<div *ngIf="alertValue">
       <div class="alert alert-primary" role="alert">
          A simple primary alert—check it out!
       </div>
     </div>

Ts

alertValue= false;
 this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      this.showNotif(this.router.getCurrentNavigation().extras.state);
    }
 });

showNotif(data: any) {
  console.log(data);
  if (data !== undefined) {
    this.alertValue= true;
    console.warn(this.alertValue);
  }
}

in the "console.log (data);" I recover well my value "hello", and in "console.warn (this.alertValue);" I recover "true" which is good.

But my alert is not activated in the html. I tried to put a button that allows to pass "true" to my "alertValue" and my alert activates

so I understand how to activate my alert during the function

If you have an idea, I'm interested

解决方案

You have to call router.getCurrentNavigation().extras.state earlier. Since it's too late it's not triggering changes.

The navigation has already ended in ngOnInit. Try putting it in the constructor instead.

// earliest life cycle 
constructor() {
    this.router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
            // subscribing to NavigationEnd which is about to happen
        }
    });
}

ngOnInit(){
    this.router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
            // subscribing to NavigationEnd which already ended so it's waiting
        }
    });
}

Let me know if you need more help but also explain more about your code and I will watch this question.

这篇关于Angular 路由器事件 NavigationEnd 未按预期触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！