通过Angular2路由器传递数据

Posted 2023-02-22

【中文标题】通过Angular2路由器传递数据

【英文标题】：Passing data through Angular2 router

【发布时间】：2017-04-23 17:15:45

【问题描述】：

我有一个组件，我可以在其中选择一组图像对象。我想将这些选定的图像传递给我的新路线 CreateAlbum。它嵌套的数据不适合作为 URL 参数传递。

有什么简单的方法可以实现吗？

这是我导航到路线的代码

  public gotoCreateAlbum(): void 
    this.router.navigate([('/create-album')])
  

我选择的数据位于这个变量中

@Input() selectedPhotos: IPhoto[];

这是我的路由模块

const routes: Routes = [
   path: 'photos',  component: PhotosComponent,
   path: 'photos/:filter', component: PhotosComponent,
   path: 'create-album', component: CreateAlbumComponent
];

基本上我想执行相同的操作，就好像 CreateAlbum 组件是我当前组件的子组件，在这种情况下我会使用 @Input()

【问题讨论】：

使用共享服务angular.io/docs/ts/latest/cookbook/…

谢谢。完美运行。希望他们有一个路由器链接的数据输入变量

一个 routerLink 只能提供 URL 栏可以提供的内容。 angular.io/docs/ts/latest/guide/router.html#!#resolve-guard 也可能有效，但它也不会从 routerLink 获取参数，除了路由参数和 URL 栏支持的其他内容。

我在网上找到的最好的是npmjs.com/package/ngx-navigation-with-data

【参考方案1】：

我希望这会奏效。尝试使用查询参数。

 <nav>
      <a [routerLink]="['/component1']">No param</a>
      <a [routerLink]="['/component2']" [queryParams]=" page: 99 ">Go to Page 99</a>
 </nav>

或

opencomponent2(pageNum) 
    this.router.navigate(['/component2'],  queryParams:  page: pageNum  );
  

在子组件中：

constructor(
    private route: ActivatedRoute,
    private router: Router) 

  ngOnInit() 
    this.sub = this.route
      .queryParams
      .subscribe(params => 
        // Defaults to 0 if no query param provided.
        this.page = +params['page'] || 0;
      );
  

我在 rangle.io 网站上研究过这个。如果它适合你，试试这个。 否则https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service 是唯一的选择。

【讨论】：

如果要传递对象怎么办？ pageNum:"name":"John"

@dev 我也一样，你找到解决办法了吗？

也许你可以避免对象。对于多个参数，您可以执行 this.router.navigate(['/Component2'], queryParams: page: 3, otherpage:4 );

【参考方案2】：

有关详细示例，请参阅 https://angular.io/guide/router。向下滚动到此代码 sn-p：

gotoHeroes(hero: Hero) 
  let heroId = hero ? hero.id : null;
  // Pass along the hero id if available
  // so that the HeroList component can select that hero.
  // Include a junk 'foo' property for fun.
  this.router.navigate(['/heroes',  id: heroId, foo: 'foo' ]);

获取目标组件中'id'的值：

ngOnInit() 
  this.heroes$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) => 
      // (+) before `params.get()` turns the string into a number
      this.selectedId = +params.get('id');
      return this.service.getHeroes();
    )
  );

【讨论】：

您如何接收数据？

@Philip Beber 为什么你在这里使用switchMap

因为 this.service.getHeroes() 异步执行并返回一个 observable。如果它同步执行并返回一个普通值，那么您将使用 map()。 switchmap 很酷，因为它取消了您不再关心的任何操作。例如，假设 this.route.paramMap.pipe() 发出一个值，然后 this.service.getHeroes() 将被调用并创建一个 observable。当 this.route.paramMap.pipe() 发出另一个值时，observable 将被取消并释放其资源。再次调用 this.service.getHeroes() 并创建一个新的 observable。

【参考方案3】：

除非您希望用户在地址栏中操作查询字符串，否则在发送数据之前和接收数据之后执行“atob”和“btoa”。一点点 安全

另外，如果您不想订阅，您可以按如下方式使用 Route 快照参数（只是它不会像 observable 那样不断更新，所以除非组件重新初始化，否则它不会'如果有的话，不会得到更新的值。因此，获取值的好地方是在 ngOnInit 事件处理程序中

// before
this._router.navigate(["/welcome/" + atob(userName)]);

// after
ngOnInit() 
    this.userName = btoa(this.route.snapshot.params['userName']);

【参考方案4】：

你可以使用路由器传递数据，例如

 path: 'form', component: FormComponent ,data :data :'Test Data' ,

和你的组件

import  ActivatedRoute, Router  from '@angular/router';

export class FormComponent 
    sub: any;
    constructor(private route: ActivatedRoute)  
    ngOnInit() 
        this.sub = this.route
            .data
            .subscribe(value => console.log(value));
    

More info

但这可能不是首选方式，you can use parent child communication or make a service common and share data between them。检查下面的参考资料。

Parent child communication

Share data using service

【讨论】：

如何动态传递数据？即使用 this.route.navigate()

【参考方案5】：

sender html

<a [routerLink]="['../../../print/attendance/',data:userDetails | json]">link</a>

receiver ts
ngOnInit() 
   this.route.params.subscribe(params=>
    
      this.data=JSON.parse(params['data'])
    
    );

  

【参考方案6】：

Angular >= 7.2.0 引入了一种在路由组件之间导航时传递数据的新方法。在路由器模块内的NavigationExtras 接口中添加了一个新属性：state: any，您可以设置将以新状态出现的数据。

在组件中

export class ComponentA 
    constructor(private router: Router) 

    goToComponentB(): void 
        // programmatically        
        this.router.navigate(['/b'], state: data: ...);
    

在 HTML 中

<a routerLink="/b" [state]=" data: ...">Go to B</a>

使用history.state.data获取组件B中的数据

export class ComponentB 
    constructor() 
       console.log(history.state.data); // GET DATA
    

感谢Ľudovít Hajzer 在此处阅读整个博客https://medium.com/ableneo/how-to-pass-data-between-routed-components-in-angular-2306308d8255

【参考方案7】：

this.router.navigate(['path',  flag: "1"]);