如何从其他组件更改url？

Question

当前项目位于Angular 6上，我尝试在左侧面板上创建按钮列表，例如“冰淇淋”，​​“爆米花”等，因此当用户单击每个按钮时，它将更改URL标题面板中的添加按钮，并且当用户单击标题上的Add按钮时，它应该显示该项目的创建页面。

我的问题是，当单击左侧面板上的按钮时，如何更改route按钮的URL（或add），因为它们来自不同的组件？

Answer 1

您可以尝试以下操作：

wrapper.component.html

<app-left-panel #menu> </app-left-panel>
<app-header [selected]="menu.selected"> </app-header>

header.component.ts

[...]
export class HeaderComponent{
    @Input() selected;
    [...]
}

header.component.html

<!-- something -->
<a [routerLink]="'\/buy\/'+selected">Add</a>
<!-- something else-->

left-panel.component.ts

items = ["popcorn","churros","coke"];
[...]
setSelected(value){
    this.selected = value;
}

left-panel.component.html

<!--something -->
<button *ngFor="let str of items" (click)="setSelected(str)">{{str}}</button>
<!-- something else -->

这样做，您可以在包装器组件内部的两个组件（左面板和标题）之间建立连接，这要归功于HeaderComponent中的@Input() selected元素。从菜单中选择每个项目后，添加按钮routerLink就会更新。