Angular2 OverlayComponentがメッセージ変数を更新しない

Question

私は以下のOverlayComponentを持っており、非同期呼び出し時に処理スピンナーとして機能します。オーバーレイは問題なくポップアップしますが、メッセージを送信しようとすると、メッセージは固執しません。

子コンポーネント

import {Component, OnInit} from '@angular/core'; 

import {OverlayComponent} from "../../shared/app.mysite.overlay.component"; 


@Component({ 
    moduleId: module.id, 
    selector: 'tracker-component', 
    templateUrl: '/public/app/templates/pages/racker/mysite.tracker.component.html', 
    styleUrls: ['../../../scss/pages/tracker/tracker.css'], 
    providers: [OverlayComponent] 
}) 

export class TrackerComponent implements OnInit{ 

    constructor(private overlayComponent: OverlayComponent) { 

    } 
    ngOnInit(): void { 

     this.overlayComponent.showOverlay("Testing 123"); //<-- shows overlay but doesn't show the message in the overlay    
    }  
} 

子コンポーネントのHTML

<div id="TrackerContainer">  
    <div class="col-lg-12" class="container"> 
     <div class="jumbotron jumbotron-header"> 
      <div> 
       <div id="pageTitle">Tracker</div> 
      </div> 
     </div> 
     <div class="content-container container"> 
      <div *ngFor="let item of tracker.activeMenu.items"> 
       <card-component [item]="item"></card-component> 
      </div> 
     </div> 
    </div> 
</div> 
<overlay-component [message]="overlayMessage"></overlay-component> 

OverlayComponent.ts

import { Component } from '@angular/core';  

@Component({  
    selector: 'overlay-component', 
    templateUrl: '/public/app/templates/shared/mysite.overlay.component.html', 
    styleUrls: ['../../app/scss/shared/overlay.css']  
}) 

export class OverlayComponent { 

    message: string; 
    //message: string = 'testing...'; <-- this updated the message just fine 
    showOverlay(msg: string) { 
     this.message = msg; // <-- the right value comes through in the msg variable but doesn't update in the page 
     $('.overlay-component-container').show(); 
    } 

    hideOverlay() { 
     $('.overlay-component-container').hide(); 
     this.message = ''; 
    }  
} 

OverlayComponent.html問題はいくつかのことが原因で発生することが

<div class="overlay-component-container"> 
    <div class="overlay-component"> 
     <div class="overlay-message">{{message}}</div> 
     <div> 
      <i class="fa fa-spinner fa-spin" aria-hidden="true"></i> 
     </div> 
    </div> 
</div> 

Answer 1

：

あなたがここにこれを必要としない、これは単なるサービスのためではなく、部品

providers: [OverlayComponent] 

のためでありますこれは別のコンポーネントへの参照を取得する方法ではなく、正しいインスタンスを持っていない可能性があります。

constructor(private overlayComponent: OverlayComponent) 

トラッカーコンポーネントのHTML内で実際に<overlay-component>ですか？

また、トラッカーコンポーネントのoverlayMessageプロパティはどこですか？ただ、オーバー成分はトラッカーコンポーネントの内部にあることを確認this.message = msg; from showOverlay()を削除し、メッセージを変更するために結合双方向のデータを使用

<overlay-component [message]="overlayMessage"></overlay-component> 

（としては、以下に使用されます）。

すなわち<overlay-component [message]="overlayMessage"></overlay-component>

あなたはoverlayMessageを追加する場合は、次の文字列を、トラッカーコンポーネント（またはオーバーレイの親コンポーネント）に追加する必要があります。親コンポーネントで更新するだけで、オーバーレイコンポーネントが変更を受け取ります。