如何将数据传递给Angular路由组件？

7 回答

• 93

  第三种方法是在组件之间共享数据的最常用方法 . 您可以注入要在相关组件中使用的项目服务 .

  import { Injectable } from '@angular/core';
  import { Predicate } from '../interfaces'
  
  import * as _ from 'lodash';
  
  @Injectable()
  export class ItemsService {
  
      constructor() { }
  
  
      removeItemFromArray<T>(array: Array<T>, item: any) {
          _.remove(array, function (current) {
              //console.log(current);
              return JSON.stringify(current) === JSON.stringify(item);
          });
      }
  
      removeItems<T>(array: Array<T>, predicate: Predicate<T>) {
          _.remove(array, predicate);
      }
  
      setItem<T>(array: Array<T>, predicate: Predicate<T>, item: T) {
          var _oldItem = _.find(array, predicate);
          if(_oldItem){
              var index = _.indexOf(array, _oldItem);
              array.splice(index, 1, item);
          } else {
              array.push(item);
          }
      }
  
  
      addItemToStart<T>(array: Array<T>, item: any) {
          array.splice(0, 0, item);
      }
  
  
      getPropertyValues<T, R>(array: Array<T>, property : string) : R
      {
          var result = _.map(array, property);
          return <R><any>result;
      }
  
      getSerialized<T>(arg: any): T {
          return <T>JSON.parse(JSON.stringify(arg));
      }
  }
  
  
  
  export interface Predicate<T> {
      (item: T): boolean
  }
  

  回复于 2024-04-26T22:51:49+08:00
• 43

  `<div class="button" click="routeWithData()">Pass data and route</div>`
  

  以角度6或其他版本执行此操作的最简单方法我希望只需使用您要传递的数据量来定义路径

  `{path: 'detailView/:id', component: DetailedViewComponent}`
  

  正如你从我的路线定义中看到的那样，我已经添加了 /:id 来支持我想通过路由器导航传递给组件的数据 . 因为你的代码看起来像

  `<a class="btn btn-white-view" [routerLink]="[ '/detailView',list.id]">view</a>`
  

  为了读取组件上的 id ，只需导入 ActivatedRoute 就好了

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

  并在 ngOnInit 上检索数据

  `ngOnInit() {
         this.sub = this.route.params.subscribe(params => {
          this.id = params['id'];
          });
          console.log(this.id);
        }`
  

  你可以在这篇文章中阅读更多https://www.tektutorialshub.com/angular-passing-parameters-to-route/

  回复于 2024-04-26T22:51:49+08:00
• 5

  我想因为我们在角度2中没有像角度1.x那样的东西 . 我们可以使用angular 2共享服务/类，而在 ngOnDestroy 传递数据到服务，并在路由后从 ngOnInit 函数中获取服务中的数据：

  Here I am using DataService to share hero object:

  import { Hero } from './hero';
  export class DataService {
    public hero: Hero;
  }
  

  Pass object from first page component:

  ngOnDestroy() {
      this.dataService.hero = this.hero; 
   }
  

  Take object from second page component:

  ngOnInit() {
      this.hero = this.dataService.hero; 
   }
  

  这是一个例子：plunker

  回复于 2024-04-26T22:51:49+08:00
• 0

  update 4.0.0

  有关详细信息，请参阅Angular文档https://angular.io/guide/router#fetch-data-before-navigating

  original

  使用服务是可行的方法 . 在路径参数中，您应该只传递要在浏览器URL栏中反映的数据 .

  另见https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

  RC.4附带的路由器重新引入 data

  constructor(private route: ActivatedRoute) {}
  

  const routes: RouterConfig = [
    {path: '', redirectTo: '/heroes', pathMatch : 'full'},
    {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
  ];
  

  class HeroDetailComponent {
    ngOnInit() {
      this.sub = this.route
        .data
        .subscribe(v => console.log(v));
    }
  
    ngOnDestroy() {
      this.sub.unsubscribe();
    }
  }
  

  另请参阅https://github.com/angular/angular/issues/9757#issuecomment-229847781的Plunker

  回复于 2024-04-26T22:51:49+08:00
• 2

  使用ActiveRoute的解决方案（如果您希望按路由传递对象 - 使用JSON.stringfy / JSON.parse）：

  发送前准备对象：

  export class AdminUserListComponent {
  
    users : User[];
  
    constructor( private router : Router) { }
  
    modifyUser(i) {
  
      let navigationExtras: NavigationExtras = {
        queryParams: {
            "user": JSON.stringify(this.users[i])
        }
      };
  
      this.router.navigate(["admin/user/edit"],  navigationExtras);
    }
  
  }
  

  在目标组件中接收您的对象：

  export class AdminUserEditComponent  {
  
    userWithRole: UserWithRole;      
  
    constructor( private route: ActivatedRoute) {}
  
    ngOnInit(): void {
      super.ngOnInit();
  
        this.route.queryParams.subscribe(params => {
          this.userWithRole.user = JSON.parse(params["user"]);
        });
    }
  
  }
  

  回复于 2024-04-26T22:51:49+08:00
• 3

  Angular 6.1.5

  路由模块{路径：'用户视图'，组件：UserViewComponent，数据：{some_data：'some value'}}

  ---

  组件从'@ angular / router'导入;

  @零件（{
  选择器：'app-user-view'，
  templateUrl：' . / user-view.component.html'，
  styleUrls：[' . / user-view.component.css']
  }）
  导出类UserViewComponent实现OnInit {

  构造函数（private activatedRoute：ActivatedRoute）{}

  ngOnInit（）{
  this.activatedRoute.data.subscribe（data => {
  的console.log（数据）
  }）
  }
  }

  ---

  My project NgModule

  从'@ angular / core'导入;从'@ angular / platform-browser'导入;从'./app.component'导入;从'./user-view/user-view.component'导入;从'./app.routing'导入; @NgModule（{declarations：[AppComponent，UserViewComponent]，import：[BrowserModule，routing] bootstrap：[AppComponent]}）export class AppModule {}

  ---

  Routing Module

  从'@ angular / router'导入{Routes，RouterModule};从'./user-view/user-view.component'导入;

  const appRoutes：Routes = [
  {path：'user-view'，component：UserViewComponent，canActivate：[AuthGuard]，data：{some_data：'some value'}}];

  export const routing = RouterModule.forRoot（appRoutes）;

  routerLink in Html

  <a [routerLink]="['/user-view']"[queryParams]="{some_data:'I'm a data'}"> </a>

  回复于 2024-04-26T22:51:49+08:00
• 2

  使用JSON传递

  <a routerLink = "/link"
     [queryParams] = "{parameterName: objectToPass| json }">
           sample Link                   
    </a>
  

  回复于 2024-04-26T22:51:49+08:00