Javascript 如何从其他组件更改url？

当前项目在

Angular 6

上，我尝试在左侧面板上列出一个按钮列表，如“冰激凌”、“爆米花”等，因此当用户单击每个按钮时，它将更改标题面板中添加按钮的URL，当用户单击标题上的

add

按钮时，它应该显示项目的创建页面

我的问题是，当单击左侧面板上的按钮时，如何更改

添加

按钮的URL（或

路由

），因为它们来自不同的组件

---

您可以尝试以下方法：

wrapper.component.html header.component.html left-panel.component.html

{{str}}

---

通过这样做，您可以在包装器组件内的两个组件（左面板和标题）之间建立连接，这要归功于HeaderComponent内选择的

@Input（）

元素。当您从菜单中选择每个项目时，添加按钮

routerLink

会被更新。

不太清楚您在问什么。。。你已经试过什么了？您遇到了什么问题？@user184994谢谢，我正在尝试学习当事件从其他组件（左面板的按钮）发送时，如何动态更改按钮（标题面板上的“添加”）的路由/url更新了问题，很抱歉出现混淆，您可以使用共享服务。左侧面板中的按钮可以设置服务中的值，单击“添加”按钮时，标题面板可以读取该值

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

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

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

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

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