为什么我的服务数据不在我的 Angular 组件之间共享？

Question

我创建了一个服务DataAccessService：

@Injectable({
  providedIn: 'root',
})
export class DataAccessService {
  constructor(private http: HttpClient) {}

  @Output() queryParamsChange: EventEmitter<any> = new EventEmitter();

  _queryParams: any = null;

  set queryParams(value: any) {
    this._queryParams = value;
    this.queryParamsChange.emit(this._queryParams);
  }

  get queryParams(): any {
    return this._queryParams;
  }

我在三个组件中使用它： 应用程序根和应用程序主页和应用程序研究， 我在构造函数中注入了这个服务，如下所示：

应用程序组件：

export class AppComponent implements OnInit {
  ...
  constructor(
    private dataService: DataAccessService,
    private router: Router,
  ) {
  ...
  } 

学习部分：

export class StudiesComponent implements OnInit, OnDestroy {

  routeNames: string[] = ['studies.toolbar.routeName'];
  queryParamsChange: Subscription;

  constructor(private dataService: DataAccessService) {}

  ngOnInit(): void {
    console.log('ON_INIT StudiesComponent');
    console.log(
      'queryParams : ' + JSON.stringify(this.dataService._queryParams)
    );

家庭组件：

export class HomeComponent implements OnInit {
  ...
  constructor(
    private dataService: DataAccessService,
    private router: Router
  ) {}

  onClick(route: string, value: any): void {
    console.log(value);
    this.dataService.queryParams = value;
    this.router.navigate([route]);
  }

当我单击时，值会发送到服务，我记录了该值并且它起作用了。

然后onClick函数导航到study页面，然后在StudiesComponent的onInit中this.dataService.queryParams返回Null。

我不明白为什么。

谢谢您的回答。

主题中已经解释了。

Answer 1

在

StudiesComponent

中，您实际上并未订阅 EventEmitter，而是读出

_queryParams

的值，该值在初始化时专门设置为

null

中的

DataAccessService

。

相反，您希望您的

StudiesComponent

订阅 EventEmitter 并监听它发出的值。

见下图：

export class StudiesComponent implements OnInit, OnDestroy {
    routeNames: string[] = ['studies.toolbar.routeName'];
    queryParamsChange: Subscription;

    constructor(private dataService: DataAccessService) {}

    ngOnInit(): void {
        console.log('ON_INIT StudiesComponent');

        this.dataService.queryParamsChange
            .subscribe(queryParams => { 
                console.log('queryParams : ' + JSON.stringify(queryParams)
            })
    }
}

另请参阅 https://v17.angular.io/api/core/EventEmitter#subscribe 了解更多信息。