कोणीय 2 घटक दृश्य परिवर्तनीय परिवर्तनों को अद्यतन नहीं करते

Question

मेरे पास एक साधारण घटक है जो केवल प्रगति पट्टी प्रस्तुत करता है।

यह ठीक शुरू करता है और प्रगति इसके लिए ठीक हो जाती है, लेकिन टेम्पलेट नए मानों के साथ अद्यतन नहीं कर रहा है।

import {Component} from 'angular2/core'; 

@Component({ 
    selector : 'progress-bar', 
    template : ` 
    <div class="progress-container"> 
     <div>{{currentProgress}}</div> 
     <div [style.width.%]="currentProgress" class="progress"></div> 
    </div> 
    `, 
    styles: [ 
    '.progress-container {width: 100%; height: 5px}', 
    '.progress {background-color: #8BC34A; height:5px}' 
    ] 
}) 

export class ProgressBar { 
    currentProgress: number; 

    constructor() { 
    this.currentProgress = 0; 
    } 

    onProgress(progress: number) { 
    console.log(progress) //consoles correct percentages 
    this.currentProgress = progress; 
    } 

    reset() { 
    console.log(this.currentProgress) //is 100 
    this.currentProgress = 0; 
    } 
} 
~ 

कहीं

ngOnInit() { 
    this.httpFileService.progress$.subscribe((progress: number) => this.onProgress(progress)); 
    } 

    onProgress(progress: number) { 
    this.progressBar.onProgress(progress*100); 
    } 

मुझे लगता है कि मैं बहुत उपचारात्मक कुछ याद आ रही है।

Answer 1

आप इस तरह से इस तरह से जा रहे हैं कि ढांचे के खिलाफ काम कर रहा है, और दांतों के बहुत चिल्लाने और पीसने के लिए जा रहा है।

अभी, आप मैन्युअल रूप से एक नमूदार सब्सक्राइब कर रहे - httpFileService.progress$ - और फिर मैन्युअल रूप से एक बच्चे ProgressBar घटक पर एक संपत्ति को अद्यतन करने, के कोणीय परिवर्तन का पता लगाने के तंत्र को दरकिनार - जिसके कारण यूआई अपडेट नहीं हो रहा है। आप मैन्युअल इस संपत्ति सेट करने के बाद परिवर्तन का पता लगाने आग सकता है और यूआई के रूप में उम्मीद अद्यतन होगा - लेकिन फिर, आप ढांचे के खिलाफ काम करना चाहते हैं, तो चलो कैसे इसके साथ बजाय काम करने के लिए पर ध्यान दें:

मुझे लगता है कि यह मान "अन्यत्र" आपके ProgressBar घटक का अभिभावक है - चलो ElsewhereComponent पर कॉल करें।

@Component({ 
    selector: 'elsewhere', 
    directives: [ProgressBar], 
    template: ` 
    <div> 
     <progress-bar [currentProgress]="httpFileService.progress$"></progress-bar> 
    </div> 
    ` 
}) 
class ElsewhereComponent { 
    // you can remove the ngOnInit and onProgress functions you posted 
    // you also don't need a reference to the child ProgressBar component 
    // ... whatever else you have in this class ... 
} 

यहाँ नोट करने के लिए सबसे महत्वपूर्ण बात यह progress-bar घटक पर [currentProgress] के अलावा है: यह कह रही एक इनपुट संपत्ति currentProgress कि घटक है कि httpFileService.progress$ करने के लिए बाध्य किया जाना चाहिए पर नामित है कोणीय है।

लेकिन अब आप कोणीय से झूठ बोल चुके हैं - जैसा कि यह खड़ा है, ProgressBar में कोई इनपुट नहीं है, और कोणीय आपको इसके बारे में बताएगा जब यह इस अनगिनत संपत्ति को दिए गए मान को बांधने का प्रयास करता है। इसलिए हम इनपुट संपत्ति जोड़ने की जरूरत है, और कहा कि ऐसा करने का पसंदीदा तरीका Input() डेकोरेटर के साथ है:

@Component({ 
    selector : 'progress-bar', 
    pipes: [AsyncPipe] //import this from angular2/core 
    template : ` 
    <div class="progress-container"> 
     <div>{{currentProgress | async}}</div> 
     <div [style.width.%]="currentProgress | async" class="progress"></div> 
    </div> 
    ` 
}) 
export class ProgressBar { 
    @Input() currentProgress: Observable<number>; 
    ... 
    constructor(){ 
    // remove the line you have in here now 
    } 

} 

यहां दो महत्वपूर्ण मतभेद दिये गये हैं: सबसे पहले, @Input() कोणीय बताता है कि currentProgress एक इनपुट संपत्ति है। हम यह भी Observable<number> को number से है कि संपत्ति के प्रकार को बदल दिया - इस सख्ती से आवश्यक नहीं है, लेकिन यह उपयोगी है क्योंकि यह दूसरा महत्वपूर्ण अंतर की अनुमति देता है:

AsyncPipe घटक के pipes में जोड़ दिया गया है, और दोनों में इस्तेमाल किया इसके टेम्पलेट बाइंडिंग के currentProgress पर। यह उपयोगी है क्योंकि यह अवलोकन को सब्सक्राइब करने और प्रत्येक बार जब यह एक नया मान निकलता है तो यूआई को अपडेट करने के सभी गंदे काम को संभालने के लिए कोणीय को बताता है।

और वह यह सब ले जाता है: दोनों बार की चौड़ाई और पाठ के ऊपर यह अब मान अपने httpFileService से उत्सर्जित प्रतिबिंबित करने के लिए आप अपडेट हो जाएगा, और आप के लिए जरूरी कोड की एक पंक्ति लिखने के लिए नहीं था इसे करना ही होगा।