加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

订阅方法不会对更改做出反应[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())

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读