javascript - Angular2 OverlayComponent 不更新消息变量

Question

我有下面的 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>

Answer 1

问题可能是由以下几点引起的:

你在这里不需要这个，这只是为了服务，而不是为了组件

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 组件(或覆盖层的父组件)然后您需要做的就是在您的父组件中更新它，您的覆盖层组件将接收更改。