मैं कोणीय 2 में बाल मार्गों के साथ जानकारी कैसे साझा करूं?

Question

मैं जो मार्गों इस प्रकार दिखाई देगा एक आवेदन है:

/:partner/login 
/:partner/tools 
/:partner/other 

वर्तमान में 2.0.0-rc.5 का उपयोग कर, मैं काफी बस मार्गों कि बिल्कुल के रूप में ऊपर देखो बना सकते हैं। हालांकि, इस दृष्टिकोण का नकारात्मक पक्ष यह है कि प्रत्येक घटक को अपने आप पर partner पैरामीटर निकालना होता है। तो login पथ घोषणा दिखाई देगा:

{ 
    path: ':partner/login', 
    component: LoginComponent 
} 

और LoginComponent दिखाई देगा:

export class LoginComponent implements OnInit { 
    partner: string; 
    constructor(private _route: ActivatedRoute) { } 

    ngOnInit() { 
     this._route.params.forEach(p => { 
      this.partner = p[`partner`]; 
     }); 
    } 
} 

हालांकि यह 3 मार्गों, धारणात्मक साथ प्रबंधनीय है, क्या मैं वास्तव में कहना चाहता हूँ वह यह है कि मेरे पास PartnerComponent है जिसमें बाल मार्ग login, tools, आदि रूटिंग इस तरह दिखेगा:

{ path: ':partner', component: PartnerComponent 
    children: [ 
     { path: 'login', component: LoginComponent}, 
     { path: 'tools', component: ToolsComponent} 
    ] 
} 

और टाइपप्रति की विरासत का उपयोग कर, मैं की तरह प्रत्येक बच्चे के लिए एक आधार के घटक बना सकते हैं:

export class LoginComponent extends BaseComponent { 
    constructor(route: ActivatedRoute) { 
     super(route); 
    } 

    ngOnInit() { 
     super.ngOnInit(); 
    } 
} 

जबकि ऊपर काम करता है, यह थोड़ा लगता है:

export class BaseComponent implements OnInit { 
    partner: string; 
    constructor(private _route: ActivatedRoute) { } 

    ngOnInit() { 
     this._route.parent.params.forEach(p => { 
      this.partner = p[`partner`]; 
     }); 
    } 
} 

और बच्चे घटकों कैसा लगेगा माता-पिता मार्ग को देखने के लिए गंदे। मुझे पता है कि क्या मैं पदानुक्रम बदलता हूं, मुझे केवल आधार में इसे बदलने की जरूरत है, लेकिन फिर भी

क्या माता-पिता और उसके बाल मार्ग घटकों के बीच जानकारी साझा करने का एक क्लीनर तरीका है।

यदि यह अधिक पारंपरिक मूल तत्व/बाल तत्व संबंध थे, तो हम उस जानकारी को पारित करने के लिए दोनों के बीच डेटा बाध्यकारी का उपयोग करेंगे।

Answer 1

माता-पिता से बच्चे को डेटा पास करने का एक और तरीका @Input का उपयोग करना है।

@Component({ 
    selector: 'partner', 
    template: 'partner.html' 
    directives: [LoginComponent] 
}) 
export class PartnerComponent { 
    partner: string; 
} 

@Component({ 
    selector: 'login', 
    template: 'login.html' 
}) 
export class LoginComponent { 
    @Input() loginPartner: string; //passed in from the parent 
} 

//partner.html 
<div> 
    <login [login-partner]='partner'></login> 
</div> 

संदर्भ https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

आप क्या कर सकते अपने माता पिता के मार्ग के लिए एक Resolve गार्ड उपयोग करने के लिए है, इसलिए किसी भी डेटा :partner मार्ग के लिए लोड किया जाएगा।

एक Resolve दिखाई देगा:

import { Injectable }    from '@angular/core'; 
import { Router, Resolve, 
     ActivatedRouteSnapshot } from '@angular/router'; 

import { Partner } from './partner.model'; 
import { Api } from './api.service'; 

@Injectable() 
export class PartnerResolve implements Resolve<Partner> { 
    constructor(private api: Api, 
       private router: Router) {} 

    resolve(route: ActivatedRouteSnapshot): Observable<Partner> { 
    let id = +route.params['partner']; 

    return this.api.getPartner(id); 
    } 
} 

बाद अपना मार्ग तो यह लोड नहीं होगा जब तक डेटा अनुरोध किया गया था PartnerResolve शामिल करने के लिए की आवश्यकता होगी और यह उपलब्ध है:

{ 
    path: ':partner', component: PartnerComponent, 
    resolve: { 
    partner: PartnerResolve 
    }, 
    children: [ 
    { path: 'login', component: LoginComponent}, 
    { path: 'tools', component: ToolsComponent}, 
    ] 
} 

और अपने PartnerComponent बस इसे प्राप्त करेगा:

ngOnInit() { 
    this.route.data.forEach((data: { partner: Partner }) => { 
    this.partner = data.partner; 
    }); 
} 

और आपके बच्चे के घटक उपयोग करेंगे:

ngOnInit() { 
    this.route.parent.data.forEach((data: { partner: Partner }) => { 
    this.partner = data.partner; 
    }); 
}