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

我的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>

主题服务.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;
  }
}

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

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

  accessGranted = false;

  constructor() {
  }
}

---

当用户登录应用程序时，我想将

accessgrated

更改为true以更改主题，但始终保持为false。当服务中的

accessgrated

更改时，是否有方法应用app.component中的更改？

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

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

但我认为这不是正确的方法。您可以使用Argular like canActivate提供的作为子路由和路由防护。

---

这里有更多信息：

您在构造函数中的赋值错误

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

---

---

在您的主题服务中，实现登录并在成功时返回

true

，您可以编写一个方法来服务并使

accessgrated

成为一个可观察的

或更好的
行为主体

在职：

export class ThemeService {

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

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

  constructor() {
  }

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

如果要更改
accessgrated
属性，可以调用服务的
setaccessgrated（）
方法

希望有帮助。
这可以通过使用共享服务来实现。这就是代码的样子：

创建一个新的文件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);
    }
}

确保在构造函数中注入了服务类。和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应用程序的真正方式，我想通过angular.io上的教程，或者通过google“angular login”获得一个合适的示例。。。但是先做教程来理解这个想法的架构，我用这个例子，一切都很好。
<div *ngIf="accessGranted | async" class="wrapper">
...
</div>

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

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