Angular 如何强制调用应用程序组件中的函数

由于第二级导航菜单，我在应用程序模块上有逻辑代码

app.component.html

<clr-main-container>
   <app-header *ngIf="headerFooter"></app-header>
   <div class="content-container">
      <main class="content-area">
         <router-outlet></router-outlet>
      </main>
      <nav *ngIf="showSecondNav" class="sidenav" [clr-nav-level]="2">
         <section class="sidenav-content">
             <a class="nav-link nav-text" routerLink="/users">Users</a> 
         </section>
      </nav>
   </div>
   <app-footer *ngIf="headerFooter"></app-footer>
</clr-main-container>

但是，从

/login

到

/home

我无法更改app.module中二级导航菜单的位置

如何强制调用

checkSecondNav（）

从登录重定向后，该构造函数（位于app.component.ts）未被调用

在login.component.ts

 ngOnInit() {
 this.isLogged = this.credentialsService.isAuthenticated();

this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationEnd) {
      this.headerFooter = (event.url !== '/login')
    }
  });
  this.checkSecondNav();

}   

checkSecondNav(){
  if(this.headerFooter && this.isLogged){
    this.showSecondNav = true;
    console.log('showSeconNav:' + this.showSecondNav);
  }

}

 if(this.user.token != null){
        this.credentials.username = this.user.name;
        this.credentials.token = this.user.token;


  this.credentialsService.setCredentials(
  this.credentials,this.loginForm.value.rememberMe);
    this.router.navigate(['home']);
  }else{
    this.wrongCredentials = "wrong credentials";

  }

---

提前感谢

您正在混合反应式/命令式方法

this.isLogged

的值始终与调用

ngOnInit

时的值相同。 反应式方法是将多个观察值组合起来，例如，

isAuthenticated$

和

currentRoute$

（后缀

$

表示按照命名约定

可观察的

）

像这样：

const currentRoute$ = this.router.events.pipe(
                              filter(event => event instanceof NavigationEnd), 
                              map(event => event.url)
                      );
//Credentials service should have observable property. You can achieve it with subject
const isAuthenticated$ = this.credentialsService.isAuthenticated$;

this.footerVisible$ = currentRoute$.pipe(map(route => route !== '/login'))

this.showSecondNav$ = combineLatest(this.footerVisible$, isAuthenticated$)
                            .pipe(map(([footerVisible, authenticated]) => footerVisible && authenticated))

在app.component.html中：

<clr-main-container>
   <app-header *ngIf="headerFooter"></app-header>
   <div class="content-container">
      <main class="content-area">
         <router-outlet></router-outlet>
      </main>
      <nav *ngIf="showSecondNav$ | async" class="sidenav" [clr-nav-level]="2">
         <section class="sidenav-content">
             <a class="nav-link nav-text" routerLink="/users">Users</a> 
         </section>
      </nav>
   </div>
   <app-footer *ngIf="footerVisible$ | async"></app-footer>
</clr-main-container>

---

如果您需要保护特定的应用程序位置免受未经授权的用户的攻击，请为此使用防护措施，而不是使用反应式/命令式方法

this.isLogged

的值始终与调用

ngOnInit

时的值相同。 反应式方法是将多个观察值组合起来，例如，

isAuthenticated$

和

currentRoute$

（后缀

$

表示按照命名约定

可观察的

）

像这样：

const currentRoute$ = this.router.events.pipe(
                              filter(event => event instanceof NavigationEnd), 
                              map(event => event.url)
                      );
//Credentials service should have observable property. You can achieve it with subject
const isAuthenticated$ = this.credentialsService.isAuthenticated$;

this.footerVisible$ = currentRoute$.pipe(map(route => route !== '/login'))

this.showSecondNav$ = combineLatest(this.footerVisible$, isAuthenticated$)
                            .pipe(map(([footerVisible, authenticated]) => footerVisible && authenticated))

在app.component.html中：

<clr-main-container>
   <app-header *ngIf="headerFooter"></app-header>
   <div class="content-container">
      <main class="content-area">
         <router-outlet></router-outlet>
      </main>
      <nav *ngIf="showSecondNav$ | async" class="sidenav" [clr-nav-level]="2">
         <section class="sidenav-content">
             <a class="nav-link nav-text" routerLink="/users">Users</a> 
         </section>
      </nav>
   </div>
   <app-footer *ngIf="footerVisible$ | async"></app-footer>
</clr-main-container>

---

如果您需要保护特定的应用程序位置不受未经授权的用户的攻击，请对此使用防护措施，而不是

*ngIf

如果调用了构造函数，请在其中设置一个条件，如果登录名为checkSecondNav（）函数，则未调用构造函数，这就是问题所在。你能展示login.component.ts和htmlh吗？这似乎是你可能想在防护装置内部做的事情的类型？如果调用了构造函数，那么在那里放一个条件，如果来自名为checkSecondNav（）函数的登录名，则不调用构造函数，这就是问题所在。你能展示login.component.ts和htmlh吗？这似乎是你可能想在防护内部做的事情吗？是的，很好，它现在工作得很好，我把一切都放在被动方法下，工作得很好，非常感谢你。router.events.subscribe（（event）=>{if（event instanceof NavigationEnd）{this.headerFooter=（event.url！='/login'）；this.isLogged=this.credentialservice.isAuthenticated（）；this.checkSecondNav（）；}}）；是的，它现在工作得很好，我把一切都放在反应式方法下，工作得很好，非常感谢你这个.router.events.subscribe（（event）=>{if（event instanceof NavigationEnd）{this.headerFooter=（event.url！='/login'）；this.isLogged=this.credentialservice.isAuthenticated（）；this.checkSecondNav（）；}}）；