Question

我创建了一个包含装载程序的组件：

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.scss'],
  providers: [LoaderService]
})
export class LoaderComponent implements OnInit {

  showloader: boolean = false;

  constructor  (private loader_service:LoaderService) {}

  ngOnInit () {
    this.loader_service.showLoaderEventChange.subscribe(state => {
      console.log(state); // Nothing prints !!
       this.showloader = state;
    })
  }
}

我有一个从其他组件调用的服务，并且该调用确实有效：

public grabJsonData (enviroment: string, language: string) {
  this.loader_service.showLoader(true);
}

它使用LoaderService：

@Injectable({
  providedIn: 'root'
})
export class LoaderService {

  showLoaderEventChange = new Subject<any>();

  constructor() { }

  showLoader(state){
    this.showLoaderEventChange.next(state);
  }

}

加载程序组件使用LoaderService，侦听showLoaderEventChange传递next()。

但是当我执行this.showLoaderEventChange.next(state)时，它在subscribe函数中什么都没捕获。

我错过了什么吗？

Answer 1

这是因为您不将service的相同实例用于组件，因为您正在root和Loader Component中注入它。

尝试从Providers : [LoaderService]中删除Loadercomponent。

Answer 2

我不确定Angular 6，因为我尚未对其进行测试，但是在Angular 5中，您必须创建一个可观察对象以从您的Subject进行观察，例如：

showLoaderEventChangeEmitter = new Subject<any>(); showLoaderEventChangeEvent$ = this.showLoaderEventChangeEmitter.asObservable();

然后使用showLoaderEventChangeEmitter.next();触发事件并使用showLoaderEventChangeEvent$.subscribe()收听事件

Angular 6主题未捕获订阅事件？

2 个答案: