Question

我希望在从detailed-page.component.ts登录后启用显示注销按钮。加入我们/注销菜单位于标题组件中。

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

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>

详细-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);
  }
}

这是一名工作人员：

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

请注意，StoreService不会针对需要对共享状态进行大量修改的应用程序进行扩展。有关更具伸缩性的解决方案，请参阅使用ngrx。

从其他组件登录后显示注销菜单？

1 个答案: