如何通過on click事件將內容加載到另一個組件中？ （角度4）

Question

我有以下問題：

在側邊欄中是我的菜單，我想如果單擊按鈕kag，則會加載組件標題中的三個新按鈕（請參見圖片）。

我不知道如何實現它：(您能給我一個提示或示例嗎？我意識到這是通過事件綁定完成的，但是如何通過單擊另一個組件來花費內容，我還不知道...

最好的問候安德烈亞斯

這是我的儀表板

Answer 1

有幾種可用的選項可以解決您的問題。 對於我將提供的解決方案，我假設您的右菜單和主菜單都已放在根組件中。

我要做的是使用解析器，該解析器將鏈接到您的路線。 然后，該解析器將更新您的菜單。 這意味着您的菜單已通過ngrx存儲在服務或應用程序狀態中。 讓我們暫時忘記ngrx，並假設您正在使用簡單的角度服務。

通過將菜單的項目配置存儲在服務中，您完全可以將其控件與其他組件分離。 它使行為更易於進行單元測試。 它也提供了靈活性，因為您可以在不更改已經實現的行為的情況下對菜單進行不同的配置。

這是建議的實現。 我尚未對其進行測試，但是它可能為您帶來了一條起點：

這是服務

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等）。

Answer 2

您可以創建一個快捷方式組件。 它將如何工作？

• 從菜單組件中獲取所選菜單的列表
• 當用戶（單擊）在共享的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); }
};

Answer 3

如果您的組件非常簡單明了，則可以使用以下代碼段。

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;
  }
}

主header.component.html

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

主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égoryElhaimer回答。