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为false时，我加载登录主题，当accessGranted为true时，我从仪表板加载所有内容。好的，这是完美的，我期望的作品。但是问题是……如何从服务中更新变量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)
}

但是我认为这不是正确的方法。您可以将其用作子级路由，也可以使用canActivate等角度提供的路由防护。在此处了解更多信息：CanActivate Doc

Answer 2

您可以编写一种服务方法，使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 3

您在构造函数中的分配错误

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

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

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

在主题服务中实施登录并成功返回true

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

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

this._sharedService.SetAccessGrant(newCityName);

确保在构造函数中注入了服务类。并在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;
    });
}

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

4 个答案: