मूल घटक को बदलने पर बच्चे घटक को फिर से लोड करें। Angular2

Question

मेरे पास एक मास्टरकंपोनेंट है जो हेडर, पाद लेख, साइडबार इत्यादि लोड करता है। शीर्षलेख पर एक ड्रॉपडाउन होता है जिसका उपयोगकर्ता लॉग इन होने के बाद सेट हो जाता है। मैं चाहता हूं कि हेडर स्थिर हो, भले ही मैं अलग-अलग मार्गों पर नेविगेट करता हूं अलग बाल घटक। इसका मतलब है कि चयनित विकल्प नहीं बदला जाना चाहिए और ड्रॉपडाउन का मूल्य सभी बाल घटक में सुलभ होना चाहिए। ड्रॉपडाउन मूल्य का आदान-प्रदान वर्तमान बाल घटक को अद्यतन/पुनः लोड किया जाना चाहिए।

मुझे इस समस्या से कैसे संपर्क करना चाहिए? मैं घटना-श्रोता प्रकार की कार्यक्षमता चाहता हूं। एक बार मास्टरकंपोनेंट चेंज से मॉडल, वर्तमान बाल घटक को फिर से लोड करें। MasterComponent के चर परिवर्तनीय अद्यतन पर ChildComponent अद्यतन को सुनेंगे और कुछ फ़ंक्शन चलाएंगे या फिर कुछ एपीआई कॉल करेंगे और ChildComponent को फिर से लोड करेंगे।

// routes 
const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'login', 
     pathMatch: 'full', 
    }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'logout', component: LogoutComponent }, 
    { 
     path: '', 
     component: MasterComponent, 
     canActivate: [AuthGuard], 
     children: [ 
      { path: 'record/create', component: RecordCreateComponent }, // create record for selectedRestaurant in MasterComponent 
      { path: 'record/', component: RecordComponent }, // shows all record of current selectedRestaurant in MasterComponent 
      { path: 'record/:id/update', component:RecordUpdateComponent }, // show form to edit record having id 
      { path: 'record/:id', component: RecordComponent }, // show record details having id 
     ] 
    }, 
    { path: '**', redirectTo: 'login' } 
]; 

// MasterComponent

@Component({ 
    selector: 'master', 
    templateUrl: templateUrl, 
    styleUrls:[styleUrl1] 

}) 
export class MasterComponent implements AfterViewInit, OnInit{ 
    restaurants: Array<Restaurant> = []; 
    user:User; 
    selectedRestaurant: Restaurant; 

    constructor(private router: Router, private storageHelper:StorageHelper){ 
    } 
    ngAfterViewInit() { 
    } 
    ngOnInit(){ 
     this.user = JSON.parse(this.storageHelper.getItem('user')); 
     this.restaurants = this.user.restaurants; 
     this.selectedRestaurant = this.restaurants[0]; 
     this.router.navigate(['/record/' + this.selectedRestaurant.id]); 
    } 
    onRestaurantChange(){ 
     this.router.navigate(['/record/' + this.selectedRestaurant.id]); 
    } 
    createRecord(){ 
    } 
} 

Answer 1

उपयोग @Input बच्चे घटकों के लिए अपने डेटा पारित करने के लिए और उसके बाद का उपयोग ngOnChanges (https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html) अगर उस @Input मक्खी पर परिवर्तित को देखने के लिए।

Answer 2

अपने टेम्पलेट सहित एक घटक को अद्यतन करने के कोणीय पर, वहाँ इस के लिए एक सीधे आगे समाधान है, अपने ChildComponent पर एक @Input संपत्ति होने और अपने @Component डेकोरेटर changeDetection में जोड़ें: इस प्रकार ChangeDetectionStrategy.OnPush:

import { ChangeDetectionStrategy } from '@angular/core'; 
@Component({ 
    selector: 'master', 
    templateUrl: templateUrl, 
    styleUrls:[styleUrl1], 
changeDetection: ChangeDetectionStrategy.OnPush 

}) 
export class ChildComponent{ 
    @Input() data: MyData; 
} 

इनपुट डेटा बदल गया है और घटक को फिर से प्रस्तुत करने के लिए यह जांच के सभी काम करेगा