<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/

现在是2019年，这里的许多答案都有用，这取决于你想做什么。如果你想传递一些URL中不可见的内部状态(params, query)，你可以从7.2开始使用state(正如我今天刚刚学到的:))。

从博客(Tomasz Kula) -您导航到....路线

…来自ts: this.router。navigateByUrl('/details'， {state: {hello: 'world'}});

…from HTML template: <a routerLink="/details" [state]="{hello: 'world'}">Go</a> .

并在目标组件中拾取它:

constructor(public activatedRoute: ActivatedRoute) {}

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

有点晚了，但希望这能帮助到刚接触Angular的人。

我认为另一种方法对这个问题不好。 我认为最好的方法是路由器角度的查询参数，有两种方式:

直接传递查询参数

有了这段代码，你可以在html代码中通过参数导航到url:

<a [routerLink]="['customer-service']" [queryParams]="{ serviceId: 99 }"></a>

通过路由器传递查询参数

你必须像这样在构造函数中注入路由器:

constructor(private router:Router){

}

现在用这个短语:

goToPage(pageNum) {
    this.router.navigate(['/product-list'], { queryParams: { serviceId: serviceId} });
}

现在，如果你想从另一个组件的路由器读取，你必须使用ActivatedRoute:

constructor(private activateRouter:ActivatedRouter){

}

并订阅:

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

更新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。

我想因为在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

您可以使用BehaviorSubject在路由组件之间共享数据。 一个BehaviorSubject包含一个值。当它被订阅时，它立即发出该值。Subject不包含值。

在服役中。

@Injectable({
  providedIn: 'root'
})
export class CustomerReportService extends BaseService {
  reportFilter = new BehaviorSubject<ReportFilterVM>(null);
  constructor(private httpClient: HttpClient) { super(); }

  getCustomerBalanceDetails(reportFilter: ReportFilterVM): Observable<Array<CustomerBalanceDetailVM>> {
    return this.httpClient.post<Array<CustomerBalanceDetailVM>>(this.apiBaseURL + 'CustomerReport/CustomerBalanceDetail', reportFilter);
  }
}

在组件中，您可以订阅这个BehaviorSubject。

this.reportService.reportFilter.subscribe(f => {
      if (f) {
        this.reportFilter = f;
      }
    });

注意:主语在这里无效，只需要使用行为主语。