Angular 2: Передача данных в маршруты?

Ответ 1

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

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

Обновление

data был повторно введен в RC.4 Как передать данные в Angular 2 компонентах при использовании маршрутизации?

Ответ 2

Он изменяется в 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'];

  }
}

Ответ 3

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

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

Ответ 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'];

Ответ 5

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

this.router.navigate(['/some-route'], {state: {data: {...}}});

тогда вы можете прочитать состояние как:

ngOnInit() {
    this.state = this.activatedRoute.paramMap
        .pipe(map(() => window.history.state));}