Question

我有一个组件，我将布尔变量的值设置到服务中，另一个组件，我订阅了相同的服务。

问题是我没有在我订阅的组件2上获得任何更新。

如果我将subscribe方法放在Component 1 ngOnInit中，一切正常。

非常感谢！

样品

组件1

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

import {SharedService} from '../shared/shared.service';

@Component({
    selector: 'welcome',
    templateUrl: './welcome.component.html',
    styleUrls: ['./welcome.component.css'],
    providers: [SharedService],
})

export class WelcomeComponent {

    constructor(private sharedService: SharedService) {}

    contentClicked(){
        this.sharedService.setSaveBtnStatus(true);
    }
}

组件2

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

import {SharedService} from '../shared/shared.service';

@Component({
  selector: 'navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css'],
  providers: [SharedService]
})
export class NavigationComponent {

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
      this.sharedService.getSaveBtnStatus().subscribe(
        data => console.log(data),
        err => console.log(err),
        () => console.log('finished')
      );
  }
}

服务

import {Injectable} from "@angular/core";
import { Subject } from 'rxjs/Subject';
import {Observable} from "rxjs/Observable";

@Injectable()
export class SharedService{
    private showSaveBtn = new Subject<boolean>();

    getSaveBtnStatus(){
        return this.showSaveBtn.asObservable();
    }

    setSaveBtnStatus(value: boolean){
        this.showSaveBtn.next(value);
    }
}

Answer 1

如果你在providers这样使用@Component

@Component({
  selector: 'navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css'],
  providers: [SharedService]  // <-- here
})

这意味着每个组件都有自己的服务实例。

将其移至AppModule.ts内的@NgModule，然后该模块中的服务将相同。

您可以阅读在组件here

中注入的时间

Angular 2将数据从组件共享到服务并返回到另一个组件

1 个答案: