Angular2 OverlayComponent不更新消息變量

我有以下OverlayComponent在異步調用期間充當處理微調器。覆蓋彈出沒有問題，但當我嘗試並傳遞消息時，消息不會粘住。Angular2 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>

來源

2016-12-09 mwilson

你可以添加'mysite.tracker.component.html'的代碼嗎？ – yurzui

我認爲你提供了提供者數組中的OverlayComponent，但是想顯示另一個組件。這個$（'。overlay-component-container'）'也很糟糕。 – yurzui

是的，我將用angular2類邏輯處理hide/show，但我試圖首先創建一個超級示例 – mwilson

的問題可能是由幾個原因引起：

你不需要這個位置，這僅僅是服務，而不是爲組件

providers: [OverlayComponent]

這不是獲得對另一個組件的引用的方式，您可能沒有正確的實例。

constructor(private overlayComponent: OverlayComponent)

<overlay-component>實際上是在Tracker組件的HTML裏面嗎？

另外，跟蹤器組件上的overlayMessage屬性在哪裏？（如下面所使用的）

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

只要確保過分量是跟蹤器組件內部，取出this.message = msg; from showOverlay()和使用雙向數據綁定來改變消息。

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

如果添加overlayMessage：串;到你的Tracker組件（或覆蓋層的父組件）然後你需要做的就是在你的父組件中更新它，並且你的覆蓋組件將會選擇這些改變。

來源

2016-12-13 01:26:37 Baconbeastnz

Angular2 OverlayComponent不更新消息變量

回答

相關問題