如何在应用程序组件中强制调用功能 [英] how to force function in app component to be called

问题描述

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

app.component.html

 < clr-main-container>< app-header * ngIf ="headerFooter"></app-header>< div class ="content-container">< main class ="content-area"><路由器插座></路由器插座></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)=> {如果(NavigationEnd的事件实例){this.headerFooter =(event.url！=='/登录')}});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']);}别的{this.wrongCredentials =错误的凭证";} 

预先感谢

解决方案

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

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

赞:

  const currentRoute $ = this.router.events.pipe(filter(event => NavigationInstance事件的NavigationEnd)，map(event => event.url));//凭据服务应具有可观察的属性.您可以通过主题实现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"><路由器插座></路由器插座></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)=> {如果(NavigationEnd的事件实例){this.isLogged = this.credentialsService.isAuthenticated();this.headerFooter = event.url！=='/登录';this.checkSecondNav();}}); 

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

Because of the second level navigation menu I have logic code on app module

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>

after login I redirect to /home expecting to go through the logic code on 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);
  }

}

but that code it's never called going from /login to /home

I can't change the location of second level navagation menu in app.module.

How can I force to call checkSecondNav() after redirecting from login, that constructor (at app.component.ts) is not called.

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

  }

Thanks in advance

解决方案

You are mixing reactive/imperative approaches.

Value of this.isLogged is always the same as it was when ngOnInit was called. Reactive approach would be to combine multiple observables e.g. isAuthenticated$ and currentRoute$ (postfix $ means Observable by naming convention).

Like this:

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))

And in your 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>

I am not sure if this is the logic you wanted, but you've got the idea about reactive approach.

If you still want to use imperative approach, just put everything in subscriber:

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

If you need to secure particular places of application from unauthorized users, use guards for this and not *ngIf.

这篇关于如何在应用程序组件中强制调用功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！