2016-12-09 3 views
7

मेरे पास नीचे ओवरले कॉम्पोनेंट है जो एसिंक कॉल के दौरान प्रोसेसिंग स्पिनर के रूप में कार्य कर रहा है। ओवरले बिना किसी मुद्दे के पॉप अप करता है लेकिन जब मैं इसे संदेश भेजता हूं और पास करता हूं, तो संदेश चिपकता नहीं है।कोणीय 2 ओवरले कॉम्पोनेंट संदेश परिवर्तनीय अद्यतन नहीं कर रहा है

बाल घटक

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

बाल घटक एचटीएमएल

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

क्या आप 'mysite.tracker.component.html' का कोड जोड़ सकते हैं? – yurzui

+1

मुझे लगता है कि आप प्रदाता सरणी में ओवरलेकंपोनेंट प्रदान करते हैं लेकिन एक और घटक दिखाना चाहते हैं। यह '$ ('ओवरले-घटक-कंटेनर') भी बहुत बुरा है। – yurzui

+0

हां, मैं कोणीय 2 वर्ग तर्क के साथ अलग-अलग छुपा/शो को संभालेगा लेकिन मैं एक सुपर उदाहरण बनाने की कोशिश कर रहा हूं, पहले – mwilson

उत्तर

4

मुद्दा कुछ चीजें की वजह से हो सकता है:

आप इस यहाँ की जरूरत नहीं है, यह सिर्फ सेवाओं के लिए है, घटकों

providers: [OverlayComponent] 

के लिए नहीं यह किसी अन्य घटक का संदर्भ प्राप्त करने का तरीका नहीं है, आपके पास सही उदाहरण नहीं हो सकता है।

constructor(private overlayComponent: OverlayComponent) 

ट्रैकर घटक के HTML के अंदर <overlay-component> वास्तव में है?

ट्रैकर घटक पर ओवरले मैसेज संपत्ति कहां है? (जैसा कि नीचे का इस्तेमाल किया)

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

बस यह सुनिश्चित करें कि अधिक घटक ट्रैकर घटक के अंदर है, this.message = msg; from showOverlay() हटाने और संदेश को बदलने के लिए बाध्यकारी दो तरह से डेटा का उपयोग करें।

यानी <overlay-component [message]="overlayMessage"></overlay-component>

आप overlayMessage जोड़ते हैं: स्ट्रिंग; अपने ट्रैकर घटक (या ओवरले के मूल घटक) के लिए, आपको बस इतना करना है कि इसे अपने मूल घटक में अपडेट करें और आपका ओवरले घटक परिवर्तन उठाएगा।

संबंधित मुद्दे