Angular2 राउटर

Question

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

क्या यह हासिल करने का कोई आसान तरीका है?

यहाँ मार्ग पर नेविगेट करने

public gotoCreateAlbum(): void { 
    this.router.navigate([('/create-album')]) 
    } 

मेरे चयनित डेटा इस चर

@Input() selectedPhotos: IPhoto[]; 

में बैठता है और यह मेरा मार्ग मॉड्यूल

const routes: Routes = [ 
    { path: 'photos', component: PhotosComponent}, 
    { path: 'photos/:filter', component: PhotosComponent}, 
    { path: 'create-album', component: CreateAlbumComponent} 
]; 

है असल में मैं चाहता हूँ मेरी कोड है वही ऑपरेशन करें जैसे कि CreateAlbum घटक डब्ल्यू में मेरे वर्तमान घटक के लिए एक बच्चा था इस मामले में मैंने @ इनपुट()

Answer 1

बारे में गहराई से उदाहरण के लिए https://angular.io/guide/router देखें में है। नीचे स्क्रॉल इस कोड स्निपेट के लिए:

gotoHeroes(hero: Hero) { 
    let heroId = hero ? hero.id : null; 
    // Pass along the hero id if available 
    // so that the HeroList component can select that hero. 
    // Include a junk 'foo' property for fun. 
    this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]); 
} 

Answer 2

का उपयोग किया होगा, मुझे उम्मीद है कि यह काम करेगा। क्वेरी पैरामीटर का उपयोग करने का प्रयास करें।

<nav> 
     <a [routerLink]="['/component1']">No param</a> 
     <a [routerLink]="['/component2']" [queryParams]="{ page: 99 }">Go to Page 99</a> 
</nav> 

या

opencomponent2(pageNum) { 
    this.router.navigate(['/component2'], { queryParams: { page: pageNum } }); 
    } 

बच्चे घटक में:

constructor(
    private route: ActivatedRoute, 
    private router: Router) {} 

    ngOnInit() { 
    this.sub = this.route 
     .queryParams 
     .subscribe(params => { 
     // Defaults to 0 if no query param provided. 
     this.page = +params['page'] || 0; 
     }); 
    } 

मैं rangle.io वेबसाइट पर इस अध्ययन किया है। अगर यह आपके लिए काम करता है तो इसे आज़माएं। अन्यथा https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service केवल विकल्प है।

Answer 3

जब तक कि आप एड्रेसबार में क्वेरी स्ट्रिंग में हेरफेर नहीं करना चाहते हैं, डेटा भेजने और प्राप्त करने से पहले "एटोब" और "बीओटीए" करें। बस थोड़ा सुरक्षा

इसके अलावा, यदि आप सदस्यता नहीं लेना चाहते हैं, तो आप रूट स्नैपशॉट परम का उपयोग निम्नानुसार कर सकते हैं (बस यह एक अवलोकन योग्य की तरह अपडेट नहीं करता है, इसलिए जब तक घटक प्राप्त नहीं हो जाता फिर से init, यह अद्यतन मूल्य हो रही नहीं किया जाएगा, यदि कोई हो। इसलिए एक अच्छा मूल्य प्राप्त करने के लिए जगह ngOnInit ईवेंट हैंडलर

// before 
this._router.navigate(["/welcome/" + atob(userName)]); 

// after 
ngOnInit() { 
    this.userName = btoa(this.route.snapshot.params['userName']); 
} 

Answer 4

this.router.navigate(['path', { flag: "1"}]); 

Answer 5

आप उदाहरण

{ path: 'form', component: FormComponent ,data :{data :'Test Data'} }, 

और अपने घटक

import { ActivatedRoute, Router } from '@angular/router'; 

export class FormComponent { 
    sub: any; 
    constructor(private route: ActivatedRoute) { } 
    ngOnInit() { 
     this.sub = this.route 
      .data 
      .subscribe(value => console.log(value)); 
    } 
} 

More info

के लिए, रूटर का उपयोग कर डेटा पारित कर सकते हैं लेकिन यह पसंदीदा तरीका, you can use parent child communication or make a service common and share data between them नहीं हो सकता। ऐसा करने के लिए नीचे संदर्भ देखें।

Parent child communication

Share data using service