您可以使用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;
      }
    });

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

使用JSON传递

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

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

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

直接传递查询参数

有了这段代码，你可以在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;
      });
  }

使用共享服务使用自定义索引存储数据。然后用queryParam发送自定义索引。这种方法更加灵活。

// component-a : typeScript :
constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.DataCollector['someDataIndex'] = data;
}

// component-a : html :
<a routerLink="/target-page" 
   [queryParams]="{index: 'someDataIndex'}"></a>

.

// component-b : typeScript :
public data;

constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.route.queryParams.subscribe(
        (queryParams: Params) => {
            this.data = this.DataCollector[queryParams['index']];
        }
    );
}

如果你有一个公式集合，它处理了几个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不是完美的，所以也许会有更好的方法来解决这个角度问题。