Question

为了将变量从另一个组件传递到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中的导入[]。

Global.service.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);
  });

 }
}

nav.component.ts

ngOnInit(): void {

//
this.getNav();

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

}

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

Answer 1

@Output（和@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);
 }
}

由于_change BehaviorSubject提供了自身之外的组件/类的事实来源，因此我们不希望公开它（因为它很容易更改）。这就是为什么我们通过get ter作为可观察者提供它的原因。这应该可行，但是如果您将服务导入到多个模块的提供程序中，则您可能具有该服务的多个实例（而且它们都不会具有相同的数据）。如果是这种情况，最好只在您的AppModule中声明您的服务。

Angular 7将变量从component传递到app.component.ts

1 个答案: