Angular2 OverlayComponent ileti değişkeni güncellenmiyor

Question

Async çağrıları sırasında işlem döndürme aracı olarak hizmet veren OverlayComponent'in altındayım. Yerleşimi sorun olmadan ortaya çıkıyor, ancak bir mesajı iletmeye çalıştığımda ileti yapışmıyor.

Çocuk Bileşen

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

Çocuk Bileşen 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

mesele bir kaç şey neden olabilir: Burada buna ihtiyacım yok

bu değil bileşenleri

providers: [OverlayComponent] 

için, sadece hizmet içindir Başka bir bileşene başvuruda bulunmanın yolu bu değil, doğru örneğe sahip olmayabilirsiniz.

constructor(private overlayComponent: OverlayComponent) 

Tracker bileşeninin HTML içinde aslında <overlay-component> mi?

Ayrıca izleyici bileşenindeki overlayMessage özelliği nerede? Sadece aşırı bileşen izleyici bileşeni içinde olduğundan emin olun this.message = msg; from showOverlay() kaldırıp mesajı değiştirmek bağlanma iki-yönlü veri kullanmak

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

(aşağıda kullanılır).

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

Eğer overlayMessage eklerseniz: string; İzleyici bileşeninize (veya üstyazının ana bileşenine) Sonra yapmanız gereken tek şey ana bileşeninizde güncellemenizdir ve kaplama bileşeniniz değişiklikleri toplar.