Как изменить URL из другого компонента?

Question

Текущий проект находится на Angular 6, и я пытаюсь создать список кнопок на левой панели, таких как «Мороженое», «Поп-корнс» и т. Д., Поэтому, когда пользователь нажимает на каждую кнопку, он изменит URL-адрес добавления. кнопку на панели заголовка, и когда пользователь нажимает кнопку Add в заголовке, он должен показать страницу создания для элемента.

У меня вопрос, как изменить URL (или route) кнопки 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-->

левый-panel.component.ts

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

левый panel.component.html

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

Тем самым вы устанавливаете соединение между двумя компонентами (левой панелью и заголовком) внутри компонента-оболочки, что достигается благодаря элементу @Input() selected внутри вашего HeaderComponent. Когда вы выбираете каждый элемент в меню, обновляется кнопка Добавить routerLink.