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

在angular 6或其他版本中，我希望最简单的方法是用你想要传递的数据量定义你的路径

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

正如你可以从我的路由定义中看到的，我已经添加了/:id来支持我想通过路由器导航传递给组件的数据。因此，您的代码将看起来像

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

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

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/

更新4.0.0

更多细节请参见Angular Angular Router -在导航前获取数据。

原始

使用服务是正确的选择。在路由参数中，您应该只传递希望在浏览器URL栏中反映的数据。

参见Angular Cookbook组件通信-双向服务。

RC.4附带的路由器重新引入了数据

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();
  }
}

参见Plunker。

路线:

{ path: 'foo-route', component: FooComponent, data: { myData: false } },

在组件中访问数据对象一次:

Pipe (take(1))立即取消订阅，因此不存在内存泄漏，也不需要手动取消订阅

constructor(private activatedRoute: ActivatedRoute) { ... }

ngOnInit(): void {
  this.activatedRoute.data.pipe(take(1)).subscribe((data) => {
    console.log(data); // do something with the data
  });
}

记得导入需要的东西

编辑:新的firstValueFrom()可能会更好

我想因为在angular 2中我们没有像在angular 1.x中那样的$rootScope。我们可以使用angular 2的共享服务/类，同时在ngOnDestroy中将数据传递给服务，并在路由后从ngOnInit函数中的服务中获取数据:

这里我使用DataService来共享英雄对象:

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

传递来自第一个页面组件的对象:

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

从第二页组件获取对象:

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

这里有一个例子:plunker

默认情况下，我不会使用一个守卫这一个对我来说，这是更多的我可以进入路线或我可以离开它。这不是为了在它们之间共享数据。

如果你想在我们进入路由之前加载数据，只需添加一个解析器，这也是路由器的一部分。

举个非常基本的例子:

解析器

import { Resolve, ActivatedRoute } from "@angular/router";
import { Observable } from "rxjs";
import { Injectable } from "@angular/core";
import { take } from "rxjs/operators";

@Injectable()
export class UserResolver implements Resolve<User> {

    constructor(
        private userService: UserService,
        private route: ActivatedRoute
    ) {}

    resolve(): Observable<firebase.User> {
        return this.route.params.pipe(
            switchMap((params) => this.userService.fetchUser(params.user_id)),
            take(1)
        );
    }
}

发送到路由器:

RouterModule.forChild([
{
    path: "user/:user_id",
    component: MyUserDetailPage,
    resolve: {
        user: UserResolver
    }
  }
}]

获取组件中的数据

ngOnInit() {
    const user: firebase.User = this.activatedRoute.snapshot.data.user;
}

这种方法的缺点是，如果他之前没有得到用户数据，他将首先进入路由，这确保用户的数据已经加载并在组件开始时准备好了，但只要数据已经加载，你就会停留在旧页面上(加载动画)

如果你有一个公式集合，它处理了几个ng组件，这些ng组件基本上是建立在类对象的集合/数组上的。10个道具，例如，包括输入值，标称值，至少单位和布尔值…，所以保持页面状态(输入+结果)结束重复很多东西。

因此，我通过使用*ngif来模拟路由，以显示单个页面的相关部分(组件)，但从不更改url。

<div *ngIf="visibleComponentA>
... All part of ComponetA 
  ></div>

CpmponetA.html

<div *ngIf="visibleComponentB>
... All part of ComponetB 
  ></div>

CpmponetB.html

这个布尔值将在组件的相关代码中设置:

@Input()visibleComponentA: boolean = true; 

ComponetA.ts

现在在第一页

<div (click)="OnClickNav(visibleComponentA)" >ComponentA</div>
<div (click)="OnClickNav(visibleComponentB)" >ComponentB</div> 

app.component.html

和方法OnClickNav(选定:NavFlags)切换组件的正确可见状态。

OnClickNav(Selected:NavFlags){

    Selected.NavStatus=!Selected.NavStatus

    Selected.NavItem=='visibleComponetA'? this.visibleComponetA.NavStatus=Selected.NavStatus: this.visibleComponetA.NavStatus= false;
    Selected.NavItem=='visibleComponetB'? this.visibleComponetB.NavStatus=Selected.NavStatus: this.visibleComponetB.NavStatus= false;

app.commonet.ts

NavFlags类很简单

export class NavFlags {
  NavItem: string = '';
  NavStatus: boolean = false;

  constructor(NavItem: string, NavStatus: boolean) {
    this.NavItem = NavItem;
    this.NavStatus = NavStatus;
  }
}

nav-flags.ts

这样，“个人”页面就不会留下任何数据丢失。我没有复制商店。 完整的示例可以访问https://angulartool.de。 通过单击该按钮，可以在组件中导航页面，而不会丢失数据。

这个hack不是完美的，所以也许会有更好的方法来解决这个角度问题。