Question

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

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>

登录后，我重定向到/home，希望通过app.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);
  }

}

但是从不将代码从/login转到/home

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

从登录重定向后，如何强制调用checkSecondNav()，未调用该构造函数（位于app.component.ts处）。

在login.component.ts

 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";

  }

预先感谢

Answer 1

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

this.isLogged的值始终与调用ngOnInit时的值相同。反应性方法将是结合多个可观察物，例如isAuthenticated$和currentRoute$（后缀$的命名约定是Observable）。

赞：

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.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    this.isLogged = this.credentialsService.isAuthenticated();
    this.headerFooter = event.url !== '/login';
    this.checkSecondNav();
  }
});

如果您需要防止未经授权的用户访问特定的应用程序位置，请为此使用保护措施，而不要*ngIf。

如何在应用程序组件中强制调用功能

1 个答案: