Saya sedang mengerjakan proyek angular2 ini di mana saya menggunakan ROUTER_DIRECTIVES
untuk menavigasi dari satu komponen ke komponen lainnya.
Ada 2 komponen. yaitu PagesComponent
&; DesignerComponent
.
Saya ingin menavigasi dari PagesComponent ke DesignerComponent.
Sejauh ini routingnya sudah benar tetapi saya perlu mengoper objek halaman
sehingga desainer dapat memuat objek halaman itu sendiri.
Saya mencoba menggunakan RouteParams tetapi mendapatkan objek halaman undefined
.
di bawah ini adalah kode saya:
pages.component.ts
import {Component, OnInit ,Input} from 'angular2/core';
import { GlobalObjectsService} from './../../shared/services/global/global.objects.service';
import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { DesignerComponent } from './../../designer/designer.component';
import {RouteParams} from 'angular2/router';
@Component({
selector: 'pages',
directives:[ROUTER_DIRECTIVES,],
templateUrl: 'app/project-manager/pages/pages.component.html'
})
@RouteConfig([
{ path: '/',name: 'Designer',component: DesignerComponent }
])
export class PagesComponent implements OnInit {
@Input() pages:any;
public selectedWorkspace:any;
constructor(private globalObjectsService:GlobalObjectsService) {
this.selectedWorkspace=this.globalObjectsService.selectedWorkspace;
}
ngOnInit() { }
}
Dalam html, saya melakukan hal berikut:
<scrollable height="300" class="list-group" style="overflow-y: auto; width: auto; height: 200px;" *ngFor="#page of pages">
{{page.name}}<a [routerLink]="['Designer',{page: page}]" title="Page Designer"><i class="fa fa-edit"></i></a>
</scrollable>
Dalam konstruktor DesignerComponent saya telah melakukan hal berikut:
constructor(params: RouteParams) {
this.page = params.get('page');
console.log(this.page);//undefined
}
Sejauh ini routing dengan benar ke desainer, tetapi ketika saya mencoba mengakses Objek halaman
di desainer maka itu menunjukkan undefined
.
Ada solusi?
Anda tidak dapat mengoper objek menggunakan param router, hanya string karena perlu direfleksikan dalam URL. Mungkin akan menjadi pendekatan yang lebih baik untuk menggunakan layanan bersama untuk mengoper data di antara komponen yang dirutekan.
Router lama memungkinkan untuk mengoper data
tetapi router baru (RC.1
) belum.
Update
data
diperkenalkan kembali di RC.4
https://stackoverflow.com/questions/36835123/how-do-i-pass-data-in-angular-2-components-while-using-routing
Ini berubah di angular 2.1.0
Dalam sesuatu.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BlogComponent } from './blog.component';
import { AddComponent } from './add/add.component';
import { EditComponent } from './edit/edit.component';
import { RouterModule } from '@angular/router';
import { MaterialModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
const routes = [
{
path: '',
component: BlogComponent
},
{
path: 'add',
component: AddComponent
},
{
path: 'edit/:id',
component: EditComponent,
data: {
type: 'edit'
}
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes),
MaterialModule.forRoot(),
FormsModule
],
declarations: [BlogComponent, EditComponent, AddComponent]
})
export class BlogModule { }
Untuk mendapatkan data atau params dalam komponen edit
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params, Data } from '@angular/router';
@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router
) { }
ngOnInit() {
this.route.snapshot.params['id'];
this.route.snapshot.data['type'];
}
}
Anda bisa melakukan ini:
app-routing-modules.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PowerBoosterComponent } from './component/power-booster.component';
export const routes: Routes = [
{ path: 'pipeexamples',component: PowerBoosterComponent,
data:{ name:'shubham' } },
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
Dalam rute di atas ini, saya ingin mengirim data melalui jalur pipeexamples ke PowerBoosterComponent.So sekarang saya dapat menerima data ini di PowerBoosterComponent seperti ini:
power-booster-component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params, Data } from '@angular/router';
@Component({
selector: 'power-booster',
template: `
<h2>Power Booster</h2>`
})
export class PowerBoosterComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router
) { }
ngOnInit() {
//this.route.snapshot.data['name']
console.log("Data via params: ",this.route.snapshot.data['name']);
}
}
Jadi Anda bisa mendapatkan data dengan this.route.snapshot.data['name']
.