Angular 2 共享数据服务不工作

Question

我已经建立了一个共享数据服务，旨在保存用户登录详细信息，然后可以用来在 header 上显示用户名，但我无法让它工作。

这是我的（缩写）代码：

// Shared Service
@Injectable()
export class SharedDataService {

    // Observable string source
    private dataSource = new Subject<any>();

    // Observable string stream
    data$ = this.dataSource.asObservable();

    // Service message commands
    insertData(data: Object) {
        this.dataSource.next(data)
    }
}

...

// Login component
import { SharedDataService } from 'shared-data.service';
@Component({
    providers: [SharedDataService]
})
export class loginComponent {
    constructor(private sharedData: SharedDataService) {}

    onLoginSubmit() {
        // Login stuff
        this.authService.login(loginInfo).subscribe(data => {
             this.sharedData.insertData({'name':'TEST'});
        }
    }
}

...

// Header component
import { SharedDataService } from 'shared-data.service';
@Component({
    providers: [SharedDataService]
})
export class headerComponent implements OnInit {
    greeting: string;

    constructor(private sharedData: SharedDataService) {}

    ngOnInit() {
        this.sharedData.data$.subscribe(data => {
            console.log('onInit',data)
            this.greeting = data.name
        });
    }
}

我可以在更新模型的服务 insertData() 方法中添加控制台日志，但 OnInit 方法不反映更改。

我编写的代码很大程度上受到了这个 plunkr 的启发，它确实有效，所以我不知道哪里出了问题。

在此处发帖之前，我尝试了一些其他尝试。 This one and this one 同样都可以在演示中使用，但不能在我的应用程序中使用。

我正在使用 Angular 2.4.8.

浏览不同的教程和论坛帖子都显示了如何使共享服务正常工作的类似示例，所以我想我做错了什么。我对来自 AngularJS 背景的 Angular 2 的构建相当陌生，这是让我真正陷入困境的第一件事。

谢谢

Answer 1

将其添加到您的 AppModule 的 @NgModule.providers 数组中：

如果您将它添加到@Component.providers 数组中，则您将 SharedDataService 实例的范围限制为该组件及其子组件。

换句话说，每个组件都有自己的注入器，这意味着 headerComponent 将创建自己的 SharedDataService 实例，loginComponent 将创建自己的实例。

Answer 2

这似乎是理解 Angular 的依赖注入时反复出现的问题。

基本问题在于您如何配置服务提供商。

短版： 始终在 NgModule 级别配置您的提供程序 除非您希望为特定组件提供单独的实例。只有这样你才能将它添加到你想要单独实例的组件的提供程序数组中。

长版： Angular 的新依赖注入系统允许您拥有多个服务实例（如果您愿意的话）（这与 AngularJS 相反，即 Angular 1 只允许单例）。如果您在 NgModule 级别为您的服务配置提供程序，您将获得由所有 components/services 等共享的服务的单例。但是，如果您将组件配置为也有一个提供程序，那么该组件（及其所有子组件）将获得它们可以共享的不同服务实例。如果您需要，此选项允许一些强大的选项。

这是基本模型。当然，它并没有那么简单，但是默认情况下在 NgModule 级别配置提供程序的基本规则，除非您明确希望特定组件使用不同的实例，否则会让您走得更远。

当您想深入了解时，check out the official Angular docs

另请注意，延迟加载也使此基本规则复杂化，因此再次检查文档。

编辑：

所以针对您的具体情况，

@Component({ providers: [SharedDataService] <--- remove this line from both of your components, and add that line to your NgModule configuration instead })

Answer 3

我的情况是我忘记配置我的导入以在@NgModules 中添加 HttpClientModule，它有效。

Angular 2 共享数据服务不工作

Angular 2 Shared Data Service is not working

javascript

observable

angularjs

angular-services

angular