如何从 angular 7 中的服务评估 app.component 中的条件？

Question

我的 app.component.html 有问题，我正在使用这个块：

<router-outlet *ngIf="!accessGranted"></router-outlet>
<div *ngIf="accessGranted" class="wrapper">
    <app-header></app-header>
    <app-left-menu></app-left-menu>

    <router-outlet></router-outlet>

    <app-footer></app-footer>
    <app-right-menu></app-right-menu>
</div>

当 accessGranted 为假时，我加载登录主题，当 accessGranted 为真时，我从仪表板加载所有内容。好的，这是完美的，我期望的作品。但问题是......如何从服务更新变量 accessGranted ？目前我在 app.component.ts:

app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ThemeService } from './services/theme.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'SmartliveWeb';

  accessGranted: boolean;

  constructor (private _themeService: ThemeService) {
    this.accessGranted = _themeService.accessGranted;
  }
}

theme.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class ThemeService {

  accessGranted = false;

  constructor() {
  }
}

当用户登录应用程序时，我想将 accessGranted 更改为 true 以更改主题，但始终保持为 false。当服务中的 accessGranted 发生变化时，有什么方法可以应用 app.component 中的变化？

Answer 1

要更新组件中的值，您需要创建该变量的 Observable，以便在更改变量时触发该值并且组件可以侦听它。例如：

  private static accessGranted = new Subject();
  accessGranted$ = ThemeService.accessGranted.asObservable();


onLogin(){
   if(loginSuccess){
      ThemeService.accessGranted.next(true);
   }else{
      ThemeService.accessGranted.next(false);
   }
}

并且在app.component你可以订阅如下：

ngOnInit(){
   this._themeService.accessGranted$
          .subscribe((res) => this.accessGranted = res)
}

但我认为这不是正确的方法。您可以使用子路由并使用 angular 提供的路由守卫，例如 canActivate。在此处获取更多信息：CanActivate Doc

Answer 2

你在构造函数中的赋值是错误的

constructor (private _themeService: ThemeService) {
   this.accessGranted = _themeService.accessGranted;
}

constructor (private themeService: ThemeService) {
   this.themeService = themeService;
}

login()
{
   this.themeService.login((res) => {
       this.themeService = res;
   });
}

在您的主题服务中实现登录并 return true 成功

Answer 3

您可以编写一个服务方法，使 accessGranted 变成 Observable 甚至更好：BehaviorSubject.

在役：

export class ThemeService {

  private accessGrantedSubject$: BehaviorSubject<boolean> = new BehaviorSubject(false);

  accessGranted = () => this.accessGrantedSubject$.asObservable();

  constructor() {
  }

  setAccessGranted = (isGranted: boolean): void => {
   this.accessGrantedSubject$.next(isGranted);
  }
}

在组件中：

export class AppComponent implements OnInit, OnDestroy {
  title = 'SmartliveWeb';

  accessGranted: Observable<boolean>;

  constructor (private _themeService: ThemeService) {
    this.accessGranted = this._themeService.accessGranted();
  }
}

并且在模板中，您可以使用 async 管道：

<div *ngIf="accessGranted | async" class="wrapper">
...
</div>

如果要更改 accessGranted 属性，可以调用服务的 setAccessGranted() 方法。

希望对您有所帮助。

Answer 4

这可以通过使用共享服务来实现。代码如下所示：

创建一个新文件Service.ts

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

@Injectable()
export class SharedService {
    // Subject (emitter) for User Name Change
    AccessGrantChange: Subject<boolean> = new Subject<boolean>();

    // SetUserChange() - This method sets the local variable and emits the change
    SetAccessGrant(param: boolean) {
        this.AccessGrantChange.next(param);
    }
}

一旦您从服务中获得结果，即在您的登录组件中，即在订阅方法中编写以下代码：

this._sharedService.SetAccessGrant(newCityName);

确保在构造函数中注入了服务 class。并在 ngOnInit 的 app.component.ts 文件中订阅事件并更改值：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ThemeService } from './services/theme.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'SmartliveWeb';

  accessGranted: boolean;

  constructor (private _themeService: ThemeService) {
    _themeService.accessGranted = this.accessGranted;
  }

  ngOnInit(){
    this._sharedService.AccessGrantChange
        .subscribe((value) => {
            this..accessGranted=value;
    });
}

如何从 angular 7 中的服务评估 app.component 中的条件？

How to evaluate a condition in app.component from service in angular 7?

angular

angular7