时间戳

首页 > 解决方案 > Angular 7 将变量从组件传递到 app.component.ts

angular - Angular 7 将变量从组件传递到 app.component.ts

问题描述

为了将变量从另一个组件传递给 app.component.ts，我创建了一个服务（请参阅下面的 Global.service.ts。）

当我的 nav.component.ts 调用该服务时，这很有效。但是，它在 app.component.ts 中不起作用。我不明白为什么，因为代码是相同的（请参阅下面的 app.component.ts。）

Nav.component.ts 在一个模块（global.module.ts）中。global.module.ts 已添加到 app.module.ts 中的 imports [] 中。

全球服务.ts

@Injectable()
export class GlobalService {
  private handleError: HandleError;
  isOpen = false;

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

  constructor(
   private http: HttpClient,
   httpErrorHandler: HttpErrorHandler
  ) {

  this.handleError = httpErrorHandler.createHandleError('GlobalService');
 }

get change(): Observable<boolean> {
  return this._change.asObservable();
}

toggle() {
 this.isOpen = !this.isOpen;
 this._change.next(this.isOpen);
}

}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { GlobalService } from './globals/global.service';

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

  constructor(
    private _globalService: GlobalService,
  ) {
 }

ngOnInit(): void {
  console.log("foo bar");

  this._globalService.change.subscribe(isOpen => {
    this.isOpen = isOpen;
    console.log(this.isOpen);
  });

 }
}

导航组件.ts

ngOnInit(): void {

//
this.getNav();

  this._globalService.change.subscribe(isOpen => {
    this.isOpen = isOpen;
    this.NavToggle(this.isOpen);
  });

}

//Toggle
hideShowSidebar() {
    this._globalService.toggle();
}

标签： angulartypescript

解决方案

( @Outputand @Input) 装饰器通常用于组件/元素的属性/属性以检测事件（并分配值），我会说它不是服务向组件发出更新的最佳方式。为此，您可以使用一个简单的 BehaviorSubject 并对您的服务进行一些更改。

@Injectable()
export class GlobalService {
 private handleError: HandleError;
 isOpen = false;
 private _change: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  constructor(
   private http: HttpClient,
   httpErrorHandler: HttpErrorHandler
  ) {

  this.handleError = httpErrorHandler.createHandleError('GlobalService');
 }

 get change(): Observable<boolean> {
  return this._change.asObseravble();
 }

 toggle() {
  this.isOpen = !this.isOpen;
  this._change.next(this.isOpen);
 }
}

由于_changeBehaviorSubject 提供了它自身之外的组件/类的真实来源，我们不想公开它（因为它很容易更改）。这就是为什么我们通过getter 作为 Observable 提供它的原因。但是，如果您将服务导入到多个模块的提供者中，这应该可以工作，您可能有多个服务实例（并且它们不会都具有相同的数据）。如果是这种情况，最好只在您的AppModule.

推荐阅读