Как я могу загрузить контент в другой компонент с помощью события щелчка? (Угловой 4)

Есть несколько вариантов решения вашей проблемы. Что касается решения, которое я предложу, я предполагаю, что ваше правое меню и главное меню были помещены в ваш корневой компонент.

Я бы использовал преобразователь, который будет связан с вашим маршрутом. Затем этот преобразователь обновит ваше меню. Это означает, что ваше меню было сохранено либо в службе, либо в состоянии приложения с помощью ngrx. На время забудем о ngrx и предположим, что вы используете простой сервис angular.

Сохраняя конфигурацию пунктов меню в сервисе, вы полностью отделяете управление им от другого компонента. Это упрощает модульное тестирование поведения. Это также обеспечивает гибкость, поскольку ваше меню может быть настроено по-разному, не изменяя уже реализованное поведение.

Вот предлагаемая реализация. Я не тестировал его, но он может дать вам начальный путь:

Вот услуга

export type MenuItems = MenuItem[];

export interface MenuItem {
    label: string;
}

@Injectable()
export class MenuItemsService {

     private $menuItems = new BehaviorSubject([]);

     set menuItems(menuItems: MenuItems){
         this.$menuItems.next(menuItems);
     }

     get menuItemsChanges() {
         return this.$menuItems;
     }
}

Вот решатель. Не забудьте привязать его к своему маршруту, чтобы он был выполнен. Конечно, если вы хотите сделать это из любого другого места, кроме резолвера, вы можете таким же образом вызвать свой MenuItemsService.

@Injectable()
export class KAGDetailsResolve implements Resolve<MenuItems[]> {

    menuItems: MenuItems = [
        {
            label: 'My first button'
        },
        {
            label: 'My second button'
        },
    ];

    constructor(private menuItemService: MenuItemsService) {}

    resolve(route: ActivatedRouteSnapshot) {

        this.menuItemService.menuItems = this.menuItems;

        return this.menuItems; // we return it as it is mandatory but that's actually not used in this example
    }
}

А вот компонент, который будет отвечать за отображение динамического меню:

// the  component which will render your menu
@Component({
    selector: 'my-dynamic-menu',
    template: `<ul>
                <li *ngFor="menuItem in menuItems | async"> {{ menuItem.label }}</li>
               </ul>`
})
export class MyDynamicMenuComponent implements OnInit{

    $menuItems: Observable<MenuItems>;

    constructor(private menuItemService: MenuItemsService) {}

    ngOnInit(): void {
        this.$menuItems = this.menuItemService.menuItemsChanges;
    }
}

Как видите, он полагается на Observable. Более того, класс MenuItem очень плох, но позволяет вам описывать больше свойств вашего элемента (цвет, класс CSS, функция, запускаемая при щелчке, любой URL-адрес и т. Д.)

Если ваш компонент довольно прост, вы можете использовать следующий фрагмент кода.

app.component.html

<p>
    <button (click)="btnClickHandler()">KAG Details</button>
</p>
<app-main-header [showHeaderButtons]="showMainHeaderButtons"></app-main-header>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  showMainHeaderButtons: boolean = false;
  btnClickHandler() {
    this.showMainHeaderButtons = !this.showMainHeaderButtons;
  }
}

main-header.component.html

<ng-container *ngIf="showHeaderButtons">
  <button>Sample Button 1</button>
  <button>Sample Button 2</button>
  <button>Sample Button 3</button>
</ng-container>

main-header.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-main-header',
  templateUrl: './main-header.component.html',
  styleUrls: ['./main-header.component.css']
})
export class MainHeaderComponent {
  private showHeaderButtons: boolean = false;

  @Input('showHeaderButtons')
  set setData(value: boolean) {
    this.showHeaderButtons = value;
  }
}

Другой подход к решению вашей проблемы - использовать наблюдаемый, на который отвечает @ Grégory Elhaimer.

Вы можете создать компонент ярлыка. Как это будет работать?

• взять список выбранного меню из компонента меню
• когда пользователь (щелчок) отправляет обновление в общий объект BehaviorSubject / Observable, который вы можете добавить в свои основные службы
• добавьте в каждый свой компонент эту службу в конструкторе

// in both component
constructor(private mainService: MainService) {}
// on click on your li or a
mainService.shortcut.next(['menu1')); 

// in your menu component, onInit : 

this.mainService.shortcut.subscribe((shortcut) => {
   if(shortcut) { this.shortcutList.push(shortcut); }
};