javascript - Angular2 OverlayComponent不更新消息变量

我有下面的OverlayComponent，它在异步调用期间充当处理微调器。叠加层会毫无问题地弹出，但是当我尝试向其传递消息时，该消息不会停留。

子组件

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

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

最佳答案

该问题可能是由以下原因引起的:

您在这里不需要此，这仅用于服务，而不用于组件

providers: [OverlayComponent]

这不是获得对另一个组件的引用的方法，您可能没有正确的实例。

constructor(private overlayComponent: OverlayComponent)

<overlay-component>实际上在Tracker组件的HTML中吗？

跟踪器组件上的overlayMessage属性也在哪里？ (如下使用)

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

只需确保over-component在tracker组件内，请删除this.message = msg; from showOverlay()并使用双向数据绑定(bind)来更改消息。

I.E <overlay-component [message]="overlayMessage"></overlay-component>
如果添加overlayMessage:string;到Tracker组件(或叠加层的父级组件)，然后您需要做的就是在父级组件中对其进行更新，然后叠加层组件将接受更改。

关于javascript - Angular2 OverlayComponent不更新消息变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41052338/