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)

实际上，Tracker组件的HTML中是不是<overlay-component> ？

另外，跟踪器组件上的overlayMessage属性在哪里？ （如下所用）

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

只要确保超组件位于跟踪器组件内部，请移除this.message = msg; from showOverlay() this.message = msg; from showOverlay()并使用双向数据绑定来更改消息。

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

如果添加overlayMessage：string; 到你的Tracker组件（或覆盖层的父组件）然后，你需要做的就是在你的父组件中更新它，并且你的覆盖组件将会选择更改。

链接地址: http://www.djcxy.com/p/94181.html

上一篇: Angular2 OverlayComponent not updating message variable

下一篇: value database with Spark