0

データベースを更新するサービスがあり、祖父母コンポーネントと親コンポーネントの両方を更新したいと考えています。

私が得ている動作は、Grandparent コンポーネントがサービスからの応答を取得していることです。祖父母のサブスクライブ コードをコメント アウトすると、親の動作が表示されます。私が望むのは、progressBar$ の値を変更するたびに両方のコンポーネントが応答することです。

サービスコード

export class CompetitionService {
  progressBarSubject = new Subject<boolean>();
  progressBar$ = this.progressBarSubject.asObservable();
  private subscription: Subscription=new Subscription();

  constructor(
    private loginService: LoginService,
    private http: Http
  ) { }

  initializeCompetition(compDate: string) {
    this.progressBarSubject.next(true);


    const login = this.loginService.getLogin();
    const url = AppSettings.API_ENDPOINT + "competition/addCompetition";

    let headers = new Headers();
    headers.append('C247Token', login.getToken())

    let body = { 'C247Token': login.getToken(), 'compDate': compDate };

    //execute http (must have a corisponding subscribe)
    this.subscription = this.http.post(url, body, { headers: headers })
      .subscribe(res => {

        this.progressBarSubject.next(false);
      },
      err => {
        this.handleError(err);
      });


  }

祖父母コンポーネント

 private isProgressBarOn: boolean = false;
  private subscription: Subscription = new Subscription();

  constructor(private loginService: LoginService,
    private competitionService: CompetitionService,
    private cd: ChangeDetectorRef,
    private router:Router
  ) { }

  ngOnInit() {    
    this.subscription = this.competitionService.progressBar$
      .subscribe(
      response => {
        this.isProgressBarOn = response;
        this.cd.detectChanges();
        //alert("Stop "+'"'+this.isProgressBarOn+'"');

      }
      );//*/
  }

親コンポーネント:

  ngOnInit() {
    this.initForm();
    this.subscription = this.competitionService.progressBar$
    .subscribe(response=>{
      console.log('hit '+response);
    }
4

1 に答える 1

0

皆さんありがとうございます。問題は router-outlet タグにあったことがわかりました。

ngIf をルータータグと組み合わせて使用​​すると、Angular2 にバグがあるようです。祖父母の ngIf を [hidden] に変更すると、両方のサブスクリプションが期待どおりに起動しました。

新しい祖父母コード テンプレート コードは

<!-- old code <div *ngIf-"isProgressBarOn"> -->
<div [hidden]="isProgressBarOn">
    <router-outlet></router-outlet>
</div>

前と同様に、サービスが isProgressBar の値を変更し、親にも通知します。

ご協力ありがとうございました

于 2016-12-19T17:02:14.190 に答える