javascript - Angular2 OverlayComponent mesaj değişkenini güncellemiyor

Aşağıdaki OverlayComponent'e sahibim ve bu, async çağrılar sırasında bir işlem spinner'ı olarak hizmet veriyor. Overlay sorunsuz bir şekilde açılıyor ama ona bir mesaj geçmeye çalıştığımda, mesaj kalıcı olmuyor.

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

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

Cevap #1

Sorun birkaç şeyden kaynaklanıyor olabilir:

Buna burada ihtiyacınız yok, bu sadece servisler için, bileşenler için değil

providers: [OverlayComponent]

Bu başka bir bileşene referans almak için doğru yol değil, doğru örneğe sahip olmayabilirsiniz.

constructor(private overlayComponent: OverlayComponent)

Tracker bileşeninin HTML'inin içinde gerçekten <overlay-component> var mı?

Ayrıca tracker bileşenindeki overlayMessage özelliği nerede? (aşağıda kullanıldığı gibi)

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

Sadece over-component'in tracker component'in içinde olduğundan emin olun, this.message=msg; from showOverlay() satırını kaldırın ve mesajı değiştirmek için çift yönlü veri bağlamayı kullanın.

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

Tracker bileşeninize (veya overlay'in üst bileşenine) overlayMessage: string; eklerseniz, yapmanız gereken tek şey üst bileşeninizde bunu güncellemek ve overlay bileşeniniz değişiklikleri alacaktır.

İlgili makaleler