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>

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

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

如果你添加overlayMessage：string;到您的Tracker组件（或叠加层的父组件）然后您需要做的就是在父组件中更新它，您的叠加组件将获取更改。

Angular2 OverlayComponent不更新消息变量

1 个答案: