Question

如何在服务和组件之间实时绑定数据。

让我们假设isAuthenticated是Authentication服务的公共变量，它会影响组件中的某些视图。我的问题是如何订阅isAuthenticated变量？

服务：

import { Injectable } from '@angular/core';

@Injectable()
export class Authentication {

  isAuthenticated:boolean = false;

  login() {
    localStorage.setItem('access_token', 'true');
    this.isAuthenticated = true;
  }
}

组件：

...
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
private isAuthenticated:boolean = false;
  constructor(public authService: Authentication) { 
   this.isAuthenticated = this.authService.isAuthenticated'
  }
}

home.html

...
<div *ngIf="isAuthenticated">Authentication view</div>
<div *ngIf="!isAuthenticated">Unauthentication view</div>
...

根据上述当前流程，绑定工作正常，但不是实时的。

那最好的方法是什么？

1-在身份验证服务内部创建一个可观察对象，以便在组件内部进行订阅。

2-使用以下方式绑定：

...
<div *ngIf="authService.isAuthenticated">Authentication view</div>
<div *ngIf="!authService.isAuthenticated">Unauthentication view</div>
...

第二种方法效果很好，但我不知道这是否是最佳实践。

谢谢。

Answer 1

此刻我正在使用此解决方案：

import { DoCheck } from '@angular/core';

//...

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  private isAuthenticated:boolean = false;
  constructor(public authService: Authentication) { }

  ngDoCheck() {
      if (this.authService.isAuthenticated)) {
        //..if authenticated do this
      } else {
        //..if not do this
      }
  }
}

即使我不确定这是一个好方法。

如何在angular的服务和组件之间共享数据？

1 个答案: