Búsqueda de sitios web

javascript - Angular2 OverlayComponent no actualiza la variable message

Tengo el siguiente OverlayComponent que funciona como un spinner de procesamiento durante llamadas asíncronas. La superposición aparece sin problema, pero cuando intento pasarle un mensaje, el mensaje no se mantiene.

Componente Hijo

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 del Componente Hijo

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

ComponenteSuperpuesto.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>

Respuesta #1

El problema podría ser causado por varias cosas:

No necesitas esto aquí, esto es solo para servicios, no para componentes

providers: [OverlayComponent]

Esta no es la manera de obtener una referencia a otro componente, es posible que no tengas la instancia correcta.

constructor(private overlayComponent: OverlayComponent)

¿Está <overlay-component> realmente dentro del HTML del componente Tracker?

¿También dónde está la propiedad overlayMessage en el componente tracker? (como se usa a continuación)

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

Solo asegúrate de que el componente superior esté dentro del componente rastreador, elimina el this.message=msg; from showOverlay() y utiliza enlace de datos bidireccional para cambiar el mensaje.

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

Si agregas overlayMessage: string; a tu componente Tracker (o al componente padre de la superposición), entonces todo lo que necesitas hacer es actualizarlo en tu componente padre y tu componente de superposición recogerá los cambios.

Artículos relacionados