Angular2 OverlayComponent, das die Nachrichtenvariable nicht aktualisiert

Question

Ich habe die folgende OverlayComponent, die während asynchronen Aufrufen als Verarbeitungsspinner dient. Die Überlagerung erscheint ohne Problem, aber wenn ich versuche, eine Nachricht an sie zu übergeben, bleibt die Nachricht nicht.

Kinder Komponente

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

Child Component 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

Die Frage von ein paar Dinge verursacht werden könnten:

du hier nicht brauchen, das ist nur für Dienstleistungen, nicht für Komponenten

providers: [OverlayComponent] 

Auf diese Weise erhalten Sie keine Referenz auf eine andere Komponente. Möglicherweise verfügen Sie nicht über die richtige Instanz.

constructor(private overlayComponent: OverlayComponent) 

Ist <overlay-component> tatsächlich innerhalb der HTML-Code der Tracker-Komponente?

Auch wo ist die Eigenschaft overlayMessage auf der Tracker-Komponente? (Wie nachstehend verwendet)

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

nur sicherstellen, dass die über Komponente innerhalb der tracker Komponente ist, entfernt die this.message = msg; from showOverlay() und verwenden bidirektionale Datenbindung, die Nachricht zu ändern.

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

Wenn Sie overlayMessage hinzufügen: string; zu Ihrer Tracker-Komponente (oder übergeordneten Komponente des Overlays). Dann müssen Sie es nur noch in Ihrer übergeordneten Komponente aktualisieren und Ihre Overlay-Komponente übernimmt die Änderungen.