Question

我正在学习Angular2，现在我遇到了问题。在我的页面中，我有一个“登录”按钮。用户登录后，我想将其更改为“注销”。由于此按钮位于app.component中，因此仅加载一次。提前致谢。

我的app.component.html

<a *ngIf="signedIn==true" [routerLink]="['Logout']">Log out</a>
<a *ngIf="signedIn==false" [routerLink]="['Login']">Log in</a>

App.component.ts

export class AppComponent {
   constructor(private _loginService: LoginService) {}
   signedIn: boolean = this._loginService.isSignedIn();
}

Answer 1

我认为您应该利用共享服务，因为您正在使用路由，这涉及多个组件。

如果要在它们之间共享状态/属性，则需要将其与observable / subject一起添加到服务中，以便在状态发生变化时通知其他组件。

以下是一个示例：

export class LoginService {
  isSignedIn: boolean;
  isSignedInSubject: Subject<boolean> = new Subject();

  setSignedIn() {
    this.isSignedIn = true;
    this.isSignedInSubject.next(true);
  }

  setSignedOut() {
    this.isSignedIn = false;
    this.isSignedInSubject.next(false);
  }
}

当signedIn状态发生变化时，主要组件可以订阅要通知的主题。

@Component({
  (...)
  template: `
    <a *ngIf="signedIn==true" [routerLink]="['Logout']">Log out</a>
    <a *ngIf="signedIn==false" [routerLink]="['Login']">Log in</a>      
  `
})
export class AppComponent {
  constructor(private _loginService:LoginService) {
    this._loginService.isSignedInSubject.subscribe(isSignedIn => {
      this.signedIn = isSignedIn;
    });
  }
}

有关详细信息，您可以看看这个问题：

Delegation: EventEmitter or Observable in Angular2

Answer 2

由于RxJS与Angular2捆绑在一起，我喜欢的方法是将isSignedIn成员重新编码为Observable并订阅它。 this plnkr中的示例。

如何在angular2中动态更改页面视图？

2 个答案: