Question

制作了一项小型服务，在授权和退出用户时显示一些数据（显示和隐藏菜单项和图片）

CODE

import { Injectable } from '@angular/core';
import { AppComponent } from '../app.component';
import { FilmComponent } from '../film/film.component';
import { UserService } from './user.service';


@Injectable()
export class UpdateDataService {
  constructor(private app: AppComponent, private film: FilmComponent, private user: UserService) {}

  updateWhenAuthorized() {
    console.log('user_authorized');
    this.app.current_user_avatar = this.user.getUSer().Avatar;
    this.app.user_authorized = true;
    this.app.show_favorite = true;
    this.app.IsAutentification = false;
    this.film.current_user_avatar = this.user.getUSer().Avatar;
    this.film.showElseNeedLoginForCommentBlock = false;
  }

  updateWhenLogout() {
    console.log('user_logout');
    this.app.user_authorized = false;
    this.app.show_favorite = false;
    this.film.showElseNeedLoginForCommentBlock = true;
  }
}

但是当我尝试登录时，我收到错误

NullInjectorError: No provider for FilmComponent!

这是一个指向github的链接，你可以将整个项目弄得更加清晰我不明白。我通过类构造函数

在服务中做了相同的FilmComponent

https://github.com/Ascolon/electron-angular

Answer 1

这不是你在Angular（或Typescript）中的表现。

constructor()用于依赖注入。您的 UpdateDataService 是一个Singleton，注入了app根组件。当你注入它时，** FilmComponent **可能没有初始化。

最好在组件和服务中使用该服务，使用在函数中更改值时发出值的Subject或BehaviourSubject。

在服务中：

  surUsrAvtr = new BehaviourSubject<any>();
  showElse = new BehaviourSubject<any>();

  updateWhenAuthorized() {
    console.log('user_authorized');
    this.app.current_user_avatar = this.user.getUSer().Avatar;
    this.app.user_authorized = true;
    this.app.show_favorite = true;
    this.app.IsAutentification = false;
    this.surUsrAvtr.next(this.user.getUSer().Avatar);
    this.showElse.next(false);
  }

  updateWhenLogout() {
    console.log('user_logout');
    this.app.user_authorized = false;
    this.app.show_favorite = false;
    this.showElse.next(true);
  }

在组件订阅那些：

export class FilmComponent implements OnInit {

  urrent_user_avatar: any;
  showElseNeedLoginForCommentBlock: any;

  constructor(private upDataService: UpdateDataService) {}

  ngOnInit() {
    this.upDataService.surUsrAvtr.subscribe(_ => this.urrent_user_avatar = _);
    this.upDataService.showElse.subscribe(_ => this.showElseNeedLoginForCommentBlock = _);
  }
}

同样适用于AppComponent

Answer 2

这里有几个问题：

首先：

您正在将组件注入服务，这没有意义。据我所知，您需要从服务中更新多个组件。那么为什么不使用像Subjects或BehaviorSubject这样的东西呢？您的服务将使用subject.next发出新值，组件会订阅这些事件。请参阅简要示例here。

第二

要以角度使用服务，必须将其添加到使用该服务的模块或组件的providers数组中。（see here）

我已经调查了Github回购。链接并看到您单独为每个组件提供服务，这意味着每个组件都将收到一个单独的服务实例。那可能会给你带来麻烦。您可能希望将服务添加到模块的提供程序数组中。这样，该模块的所有组件在注入时都将接收该服务的单例实例。请参阅angular site.

中的更好解释

Angular 5.为什么提供者需要一个组件。 InjectorError

2 个答案: