Javascript Angular 2：将数据传递给路由？

Angular 2: Passing Data to Routes?

提问by Bhushan Gadekar

I am working on this angular2 project in which I am using ROUTER_DIRECTIVESto navigate from one component to other.

我正在研究这个 angular2 项目，我正在使用该项目ROUTER_DIRECTIVES从一个组件导航到另一个组件。

There are 2 components. i.e. PagesComponent& DesignerComponent.

有2个组件。即PagesComponent＆DesignerComponent。

I want to navigate from PagesComponent to DesignerComponent.

我想从 PagesComponent 导航到 DesignerComponent。

So far its routing correctly but I needed to pass pageObject so designer can load that page object in itself.

到目前为止，它的路由是正确的，但我需要传递pageObject 以便设计者可以自己加载该页面对象。

I tried using RouteParams But its getting page object undefined.

我尝试使用 RouteParams 但它正在获取页面对象undefined。

below is my code:

下面是我的代码：

pages.component.ts

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

In the html, I am doing following:

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

In the DesignerComponent constructor I have done the following:

在 DesignerComponent 构造函数中，我完成了以下操作：

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

So far its routing correctly to designer, but when I am trying to access pageObject in designer then its showing undefined. Any solutions?

到目前为止，它正确路由到设计器，但是当我尝试page在设计器中访问Object 时，它会显示undefined. 任何解决方案？

采纳答案by Günter Z?chbauer

You can't pass objects using router params, only strings because it needs to be reflected in the URL. It would be probably a better approach to use a shared service to pass data around between routed components anyway.

您不能使用路由器参数传递对象，只能传递字符串，因为它需要反映在 URL 中。无论如何，使用共享服务在路由组件之间传递数据可能是一种更好的方法。

The old router allows to pass databut the new (RC.1) router doesn't yet.

旧路由器允许通过，data但新 ( RC.1) 路由器还不允许。

Update

更新

datawas re-introduced in RC.4How do I pass data in Angular 2 components while using Routing?

data在RC.4如何在使用路由时在 Angular 2 组件中传递数据？

回答by Veerendra Borra

It changes in angular 2.1.0

它在角度 2.1.0 中发生变化

In something.module.ts

在 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 { }

To get the data or params in edit component

在编辑组件中获取数据或参数

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

  }
}

回答by Shubham Verma

You can do this:

你可以这样做：

app-routing-modules.ts:

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

In this above route, I want to send data via a pipeexamples path to PowerBoosterComponent.So now I can receive this data in PowerBoosterComponent like this:

在上面的这条路线中，我想通过管道示例路径将数据发送到 PowerBoosterComponent.So 现在我可以像这样在 PowerBoosterComponent 中接收这些数据：

power-booster-component.ts

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

So you can get the data by this.route.snapshot.data['name'].

所以你可以通过this.route.snapshot.data['name'].

回答by Jeremy Quick

1. Set up your routes to accept data

1. 设置路由以接受数据

{
    path: 'some-route',
    loadChildren: 
      () => import(
        './some-component/some-component.module'
      ).then(
        m => m.SomeComponentModule
      ),
    data: {
      key: 'value',
      ...
    },
}

2. Navigate to route:

2.导航到路线：

From HTML:

来自 HTML：

<a [routerLink]=['/some-component', { key: 'value', ... }> ... </a>

Or from Typescript:

或者从打字稿：

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

...

 this.router.navigate(
    [
       '/some-component',
       {
          key: 'value',
          ...
       }
    ]
 );

3. Get data from route

3. 从路由中获取数据

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

...

this.value = this.route.snapshot.params['key'];