Question

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

有2个组件。即PagesComponent＆amp; 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
}

到目前为止，它正确地路由到设计器，但是当我尝试访问设计器中的page对象时，它显示undefined。任何解决方案？

Answer 1

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

旧路由器允许传递data但新的（RC.1）路由器尚未传递。

<强>更新

data已在RC.4 How do I pass data in Angular 2 components while using Routing?

中重新引入

Answer 2

角度变化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'];

  }
}

Answer 3

你可以这样做：

应用路由-modules.ts：

db.collection.aggregate([ {$project : { "ID":1, "doc.Type" : "$Type", "doc.Cat" : "$Cat", "doc.ID" : "$ID" } } {$group : { _id : "$ID", docs : {$push : doc} } }, {$match : { "docs.Type":"Processed" } }, {$unwind : "$docs"}, {$project : { _id : 0, docs : 0, "Type" : "$docs.Type", "Cat" : "$docs.Cat", "ID" : "$docs.ID" } } ])

在上面的路由中，我想通过pipeexamples路径将数据发送到PowerBoosterComponent.So现在我可以在PowerBoosterComponent中接收这样的数据，如下所示：

<强>动力助力器component.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 {}

因此，您可以按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']); } }获取数据。

Answer 4

1。设置您的路线以接受数据

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

2。导航至路线：

从HTML：

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

或来自打字稿：

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

...

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

3。从路线获取数据

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

...

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

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

4 个答案: