当breadcrump项目点击或路线改变角度4时更改侧栏菜单

Question

我正在使用角度4开发Web应用程序。

我拥有的是侧边栏菜单和breadcrump列表项。当我点击侧边栏菜单中的某个项目时，在我的服务中使用主题时会更新breadcrump列表：

public static doUpdate: Subject<boolean> = new Subject();

在侧边栏组件中：

export class MenuPushMultilevelChildrenComponent implements OnInit {

// Parent Menu
@Input() parentMenu: string;
// Children website Structure
@Input() websiteStructure: WebsiteStructure[] = [];
constructor(
  private websiteService: WebsiteService,
  private route: ActivatedRoute,
  private router: Router,
  public rendrer: Renderer
) {

}

ngOnInit() {
}

/**
 * Based on the parent Id, return the actual menu name
 *
 * @returns {string}
 */
public actualMenu(id: number): string {

  if (this.parentMenu == null) {
    return 'menu-' + id;
  } else {
    return this.parentMenu + '-' + id;
  }

}

public routeUrl(categoryId: string): string {
  return this.websiteService.getRouteByCategoryId(categoryId);
}


public goToRoute(categoryId: string) {
  this.websiteService.categoryId = (categoryId === 'home') ? null :   categoryId;
  WebsiteService.doUpdate.next();
  this.websiteService.updateCategory(categoryId);
}

sidebar.html：

<label class="sub-menu menu-children" *ngIf="category.hasChildren()" [routerLink]="routeUrl(category.id)" (click)="goToRoute(category.id)" [for]="actualMenu(i)" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
  <span class="title" fxFlex> {{ category.title }}</span>
  <mat-icon>keyboard_arrow_right</mat-icon>
</label>

<input type="checkbox" [id]="actualMenu(i)" [name]="actualMenu(i)" class="menu-checkbox">

<div class="menu" *ngIf="category.hasChildren()" >
  <label [routerLink]="routeUrl(category.id)" #element (click)="goToRoute(category.id)" class="menu-toggle back" [for]="actualMenu(i)" fxLayout="row" fxLayoutAlign="space-between center">
    <a><mat-icon class="icon-left">keyboard_arrow_left</mat-icon>
      <span id="title-back" style="padding-right: 100px" >{{category.title}} </span></a>

  </label>
  <app-menu-push-multilevel-children [websiteStructure]="category.children" [parentMenu]="actualMenu(i)"></app-menu-push-multilevel-children>
</div>

在breadcrump.component中：

this.route.params.subscribe(_ => {
   this.website = websiteService.getActualWebsite();
  // Stores the breadcrumb
    this.breadcrumbList = websiteService.getBreadcrumb();
});

breadcrump.html：

<a *ngFor="let category of breadcrumbList; let i = index" [routerLink]="routeUrl(category.id)" (click)="goToRoute(category.id, i)">

<!-- Separator -->
<span class="separator" *ngIf="i < breadcrumbList.length">
  >
</span>

<!-- Title -->
<span>
  {{ category.title }}
</span>

我想要的是是相反的方式。 =＆GT;单击breadcrump时，更改侧边栏菜单项。

我试图关注this example，但它没有效果。

websiteStructre类似于：[id：＆＃39; thxslej＆＃39;，children：[]，name：＆＃39; Item1＆＃39;] ...

点击breadcrump项目时，我希望更新侧边栏菜单。