कोणीय 2 @ राउटर-आउटलेट>

Question

के साथ @ इनपुट्स का उपयोग करके मेरे पृष्ठ में एक उप-नेविगेशन है जो एक सामान्य मुख्य दृश्य के नीचे कुछ सबव्यूव प्रदर्शित करता है। मैं <router-outlet> के माध्यम से उप-दृश्यों में ऑब्जेक्ट पास करना चाहता हूं ताकि मैं मुख्य घटक में एक बार डेटा पुनर्प्राप्त कर सकूं और इसे अपने उप घटकों के साथ साझा कर सकूं।

नोट: यदि मैं में <one></one> निर्देश को शामिल करता हूं तो main.html यह काम करता है लेकिन यह मेरा वांछित व्यवहार नहीं है।

मुख्य दृश्य:

<h1>Details</h1> 
<a [router-link]="['./sub1']">One</a> | 
<a [router-link]="['./sub2']">Two</a> | 
<a [router-link]="['./sub3']">Three</a> 
<hr/> 
<router-outlet [data]="maindata"></router-outlet> 

उप देखें 1:

<h2>{{ data.name }}</h2> 
... 

मुख्य दृश्य:

@Component({ 
    selector: 'main-detail', 
    directives: [ROUTER_DIRECTIVES], 
    templateUrl: './main.html' 
}) 
@RouteConfig([ 
    { path: '/', redirectTo: '/one' }, 
    { path: '/one', as: 'One', component: OneComponent }, 
    { path: '/two', as: 'Two', component: TwoComponent }, 
    { path: '/three', as: 'Three', component: ThreeComponent } 
]) 
export class MainComponent { 
    maindata: Object = {name:'jim'}; 
} 

उप देखें 1:

@Component({ 
    selector: 'one', 
    directives: [CORE_DIRECTIVES], 
    inputs: ['data'], 
    templateUrl: './one.html' 
}) 
export class OneComponent { 
    @Input() data; 
} 

Answer 1

यह आसान डेटा है, तो आप अपनी उप दृश्य में के माध्यम से RouteParams

<a [router-link]="['./sub3'],{name:'jim'}">Three</a> 

फिर उन्हें पारित कर सकते हैं

@Component({ 
    selector: 'one', 
    directives: [CORE_DIRECTIVES], 
    templateUrl: './one.html' 
}) 
export class OneComponent { 
    data: any; 
    constructor(params: RouteParams){ 
    this.data = params.get('data'); 
    } 
} 

तुम भी सेटअप मार्ग हमेशा के लिए कर सकते हैं घटक (नोट, यह सामान्य रूप से ऐसा नहीं किया जाता है) के अंदर राउटरकॉन्फिग को स्थानांतरित करके घटक से पैरा पास करें।:

export class AppCmp { 
    history: string[] = []; 
    constructor(public list: PersonalizationList, 
       private router_: Router) { 
    list.get('histoy', (response) => { 
     this.history = response; 
    }); 
    router_.config([ 
     { path: '/', component: HomeCmp, as: 'Home', data: this.history }, 
     { path: '/about', component: AboutCmp, as: 'About' } 
    ]); 
    } 
} 

Credit to the Source

आप और अधिक जटिल मैं के बीच मार्गों/घटकों संवाद करने के लिए एक सेवा का उपयोग करने का सुझाव देते हैं कुछ करने के लिए जा रहे हैं। यह वास्तव में जिस तरह से मैं इसे करना पसंद करता हूं।

नमूना सेवा:

import {Injectable} from 'angular2/angular2'; 

@Injectable() 
export class CarsService { 
    list1: array<any> = ['a','b','c','d']; 
    list2: array<any>; 

    constructor() { 
    this.list2 = [1,2,3,9,11]; 
    } 
} 

आप एक सेवा कैसे सम्मिलित करें:

export class Cars { 
    constructor(cars:CarsService) { 
    this.cmpList1 = cars.list1; 
    this.cmpList2 = cars.list2; 
    } 
} 

इस तरह आप माता पिता/बच्चे या अन्य अजीब प्रतिबंध की परवाह किए बिना संवाद करने के लिए सेवा का उपयोग कर सकते हैं।

Answer 2

ऐसा लगता है कि वाक्यविन्यास बदल दिया गया है। मेरे लिए काम ~ नीचे कोणीय 4.0।0

एचटीएमएल (दर्रा मार्ग पैरामीटर्स)

<li><a [routerLink]="['/templatecreate',{mode:'New'}]">New Job</a></li> 

घटक

constructor(private route: ActivatedRoute) { } 

ngOnInit() {  
    this.getTemplate(); 

    this.sub = this.route.params.subscribe(params => {this.id = params['mode']; 
    console.log("Routing Mode", this.id);  
}) 

Answer 3

मुझे लगता है कि उचित Angular2 तरह से गुजर जा करने के लिए (एक सेवा का उपयोग करके) डेटा निर्भरता इंजेक्शन के माध्यम से है अन्यथा उपयोगकर्ता ब्राउज़र के यूआरएल में आपके द्वारा पारित डेटा देख पाएगा।

इसके अलावा, एक सेवा का उपयोग "चिंताएं का पृथक्करण" के लिए अनुमति देगा, जिसका अर्थ है कि घटक एक घटक बी

निर्भरता इंजेक्शन लिंक पर निर्भर नहीं होना चाहिए:

1) https://angular.io/guide/dependency-injection

2) https://angular.io/guide/dependency-injection-in-action

3) https://www.youtube.com/watch?v=MJrw43GP2u0