订阅方法不会对更改做出反应[Angular 2]
发布时间:2020-12-17 17:35:37 所属栏目:安全 来源:网络整理
导读:我的app.component中有方法可以更改LangService中的语言.当发生更改时,LangService应该使用Observable对象响应所有其他组件,因为我订阅了所有组件中的更改.不幸的是,它没有发生.它只响应调用该函数来改变语言的app.component.我不确定我在哪里弄错了.也许我
我的app.component中有方法可以更改LangService中的语言.当发生更改时,LangService应该使用Observable对象响应所有其他组件,因为我订阅了所有组件中的更改.不幸的是,它没有发生.它只响应调用该函数来改变语言的app.component.我不确定我在哪里弄错了.也许我只是误解了整个概念,因为我是Angular的新手.
这是代码: app.component.html <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> {{ title }} </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <ol class="breadcrumb"> <li *ngFor="let lang of langs"> <a (click)="changeLanguage(lang)"> {{ lang }} </a> </li> </ol> </ul> </div> </div> </nav> <router-outlet></router-outlet> app.component.ts import { Component } from '@angular/core'; import './rxjs-operators'; import { ROUTER_DIRECTIVES } from '@angular/router'; import { LangService } from './lang.service'; import { NotesComponent } from './notes/notes.component'; @Component({ moduleId: module.id,selector: 'app-root',templateUrl: 'app.component.html',styleUrls: ['app.component.css'],directives: [NotesComponent,ROUTER_DIRECTIVES],providers: [LangService] }) export class AppComponent { title = " Note App for BSC-Ideas"; langs :Array<string> = ['EN','CZ']; constructor( private _langService :LangService ) { this._langService.activeLang$.subscribe( success => console.log('done') // It works here ); } changeLanguage(lang :string) :void{ this._langService.changeLanguage(lang); } } 一些other.component.ts import { Component,OnInit } from '@angular/core'; import { LangService } from '../lang.service'; @Component({ moduleId: module.id,selector: 'all-notes',templateUrl: 'notes.component.html',providers: [NoteService,LangService] }) export class NotesComponent implements OnInit { mode = 'Observable'; constructor(private _langService :LangService) {} ngOnInit() { this.updatePhrases(this.postPhrases); this._langService.getUpdates().subscribe( success => console.log('is working') //Doesn't work here ); } } LangService import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Subject } from 'rxjs/Subject'; @Injectable() export class LangService { activeLang = 'EN'; private activeLangSubject = new Subject<string>(); activeLang$= this.activeLangSubject.asObservable(); getUpdates() :Observable<Object>{ return this.activeLang$.map( response => response || {} ); } changeLanguage(lang :string){ if(lang == 'EN' || lang == 'CZ'){ this.activeLang = lang; this.activeLangSubject.next(lang); } } } 谢谢您的帮助. 解决方法
如果在每个组件上提供LangService,则每个组件都将获得自己的实例.
而是只在根组件或引导程序中提供一次(AppComponent,[LangService]) 如果你使用RC.5将它添加到提供者:@NgModule()的[LangService]然后它将成为一个全局服务automaticall(除非它是一个延迟加载模块,那么你需要使用forRoot()) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |