2016-05-11 1 views
20

Я работаю над этим проектом angular2, в котором я использую ROUTER_DIRECTIVES для перехода от одного компонента к другому.Угловой 2: Передача данных в маршруты?

Есть 2 компонента. т.е. PagesComponent & DesignerComponent.

Я хочу перейти от PagesComponent к DesignerComponent.

До сих пор его маршрутизация правильно, но мне нужно было пройти page Объект, так что дизайнер может загрузить этот объект страницы сам по себе.

Я пробовал использовать RouteParams Но его получение объекта страницы undefined.

ниже мой код:

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() { } 
} 

В HTML, я делаю следующее:

<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> 

В конструкторе DesignerComponent я сделал следующие:

constructor(params: RouteParams) { 
    this.page = params.get('page'); 
    console.log(this.page);//undefined 
} 

До сих пор его правильная маршрутизация дизайнеру, но когда я пытаюсь получить доступ к объекту в дизайне, то его показ undefined. Любые решения?

+2

'ROUTER_DIRECTIVES' звук, как будто вы используете угловую версию из темных времен ;-) –

ответ

15

Вы не можете передавать объекты с помощью параметров маршрутизатора, только строки, потому что это должно быть отражено в URL-адресе. Вероятно, это был бы лучший подход к использованию общей службы для передачи данных между маршрутизируемыми компонентами.

Старый маршрутизатор позволяет пройти data, но новый (RC.1) маршрутизатор еще не наступил.

Обновление

data был вновь введен в RC.4How do I pass data in Angular 2 components while using Routing?

+0

так что можно сделать в текущем сценарии, глядя на этот проект? –

+0

Вы предоставляете услугу у родительского компонента и вводите его в оба маршрутизированных компонента. Когда вы устанавливаете свойство из одного компонента, другое может прочитать свойство. https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –

+0

Я использовал этот подход для разных целей. Я думал, могу ли я передать page_id в качестве строки, а также ее штраф. но его получение page_id также является нулевым. –

12

Это изменяет в угловом 2.1.0

В something.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 { } 

Для того, чтобы получить данных или параметров в компоненте редактирования

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']; 

    } 
} 
+7

Можете ли вы передать эти данные на маршрут в точке навигации вместо конфигурации маршрутизации? Например, в ситуации с мастер-деталями, где компонент детали заменяет (а значит и не является дочерним) главный компонент, вы можете передать объект основных данных компоненту детали во время навигации к нему, чтобы компонент детали мог отображать некоторые из его данные при загрузке подробных данных? – Sebastien

+2

@Sebastien вы получили свой ответ ... plzz расскажите, как вы это сделали –

1

Вы можете сделать это:

приложение-маршрутизации 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 {} 

В этом выше пути, я хочу, чтобы отправить данные через канал pipeexamples к PowerBoosterComponent.Так что теперь я могу получить эти данные в PowerBoosterComponent так:

питания бустер-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']); 
    } 
} 

Таким образом, вы можете получить данные по this.route.snapshot.data['name'].

+8

Что делать, если я хочу динамически устанавливать данные? Например, при использовании router.navigate()? – FelipeDrumond

+0

Не задавайте новые вопросы с помощью комментариев. Сначала найдите, а затем отправьте новый вопрос, если нужно. вы можете установить данные динамически следующим образом: - this.router.navigate (['/ detail', this.object.id]); –

+0

Я замечаю, что вы можете получить «ActivatedRoute» при передаче через DI. Почему вы не можете получить его из «Router»? –