web-dev-qa-db-ja.com

Angular 2：ルートにデータを渡しますか？

私はROUTER_DIRECTIVESを使用して1つのコンポーネントから別のコンポーネントにナビゲートするこのAngle2プロジェクトに取り組んでいます。

2つのコンポーネントがあります。すなわちPagesComponent＆DesignerComponent。

PagesComponentからDesignerComponentに移動したい。

これまでのところ、ルーティングは正しく行われていますが、page Objectを渡して、デザイナーがそのページオブジェクトをロードできるようにする必要がありました。

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と表示されます。解決策はありますか？

javascripttypescriptangularangular2-routing
33
Bhushan Gadekar

ルーターパラメーターを使用してオブジェクトを渡すことはできません。URLに反映する必要があるため、文字列のみを渡します。共有サービスを使用して、とにかくルーティングされたコンポーネント間でデータをやり取りする方が、おそらくより良いアプローチでしょう。

古いルーターはdataを渡すことができますが、新しい（RC.1）ルーターはまだ渡していません。

更新

dataがRC.4で再導入されました ルーティングの使用中にAngular 2つのコンポーネントにデータを渡す方法は？

18
Günter Zöchbauer

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

  }
}
16
Veerendra Borra

あなたはこれを行うことができます：

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

この上記のルートでは、PowerBoosterComponentへのpipeexamplesパスを介してデータを送信したいので、次のようにPowerBoosterComponentでこのデータを受信できます：

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

したがって、this.route.snapshot.data['name']でデータを取得できます。

1
Shubham Verma

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>

またはTypeScriptから：

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

...

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

。ルートからデータを取得

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

...

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