Angular2 OverlayComponent nie aktualizuje zmienną komunikatu

Question

Mam poniżej OverlayComponent, który służy jako pokrętło przetwarzania podczas połączeń asynchronicznych. Nakładka pojawia się bez problemu, ale kiedy próbuję przekazać wiadomość, wiadomość nie jest przyklejona.

składowe Dziecko

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    
    }  
} 

składowe Dziecko 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

Problem może być spowodowane przez kilka rzeczy:

nie trzeba to tu, to tylko za usługi, a nie dla komponentów

providers: [OverlayComponent] 

Nie jest to sposób uzyskania odniesienia do innego komponentu, może nie mieć prawidłowej instancji.

constructor(private overlayComponent: OverlayComponent) 

Czy <overlay-component> faktycznie wewnątrz HTML składnika Tracker?

Również gdzie znajduje się właściwość overlayMessage w komponencie śledzącym? (Stosowany poniżej)

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

Wystarczy upewnić się, że nadmierna komponent jest wewnątrz komponentu Tracker, wyjąć i używać this.message = msg; from showOverlay() dwukierunkowe powiązanie danych, aby zmienić komunikat.

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

Jeśli dodać overlayMessage: string; do komponentu Tracker (lub komponentu nadrzędnego nakładki) Następnie wystarczy zaktualizować go w komponencie nadrzędnym, a składnik nakładki przejmie zmiany.