从另一个组件登录后显示注销菜单？

Question

我想在从 detailed-page.component.ts 登录后启用显示注销按钮。加入 Us/Logout 菜单位于 header 组件中。

这是我试过的。但是登录后不启用注销菜单。如何解决这个问题？

header.component.html

<ul class="nav navbar-nav navbar-right">                                       
     <li class="loginmenu joinusmenu" (click)="showmodel('register');" *ngIf="loginStatus==0" ><span>Join Us</span></li>
     <li class="loginmenu joinusmenu" (click)="logout();" *ngIf="loginStatus==1"><span>Logout</span></li>
</ul>

detailed-page.component.ts

constructor(

    private headerComponent: HeaderComponent

) {}

login() {

    this.loading = true;
    this.authenticationService.login(this.model.username, this.model.lpassword)
        .subscribe(
                data => {
                this.headerComponent.loginStatus= 1;
                })
}

app.component.ts

    @Component({ 
      selector: 'my-app',
      template: `
        <app-header></app-header>
        <router-outlet></router-outlet>    
        <app-footer></app-footer>`,
      styleUrls: ['../app/app.component.css'],
    })

    export class AppComponent { 

    }

Answer 1

假设您不需要做很多状态管理，您可以使用像这样的非常简单的服务。基本上这个 StoreService 将包含需要在所有组件之间共享的所有数据：

export class StoreService {
  public loginStatus = 0; // 0 = not logged in, 1 = logged in

  setLoginStatus(status: number) {
    this.loginStatus = status;
  }
}

这会像这样被注入到你的头部和详细组件中：

@Component({
  selector: 'app-detailed',
  template: `
 <button *ngIf="store.loginStatus === 0" (click)="login()">Login</button>
`,
})
export class DetailedComponent {
  constructor(public store: StoreService) {
  }

  login() {
    this.store.setLoginStatus(1);
  }
}

@Component({
  selector: 'app-header',
  template: `
  <ul class="nav navbar-nav navbar-right">                                       
       <li class="loginmenu joinusmenu" (click)="showmodel('register')" *ngIf="store.loginStatus==0" ><span>Join Us</span></li>
       <li class="loginmenu joinusmenu" (click)="logout()" *ngIf="store.loginStatus==1"><span>Logout</span></li>
  </ul>
`,
})
export class HeaderComponent {
  constructor(public store: StoreService) {
  }

  showmodel() {
  }

  logout() {
    this.store.setLoginStatus(0);
  }
}

这是一个有效的 plunker：

https://plnkr.co/edit/xBnWAP7EacoIc5j3USQv?p=preview

请注意，StoreService 无法针对需要对共享状态进行大量修改的应用程序进行扩展。如需更具可扩展性的解决方案，请考虑使用 ngrx。

从另一个组件登录后显示注销菜单？

Display logout menu after login from another component?

angular-services

angular