如何通过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回答。