Question

我有以下问题：

侧边栏中的

是我的菜单，如果我点击按钮kag，则会加载组件头中的三个新按钮（参见图片）。

我不知道如何实现它:(你能给我一个提示或示例吗？我意识到这是通过事件绑定完成的，但是如何在另一个组件中点击内容，我还不知道.. ..

祝你好运安德烈亚斯

Here is my Dashboard

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类，触发点击的功能，任何网址等）

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回答的observable。

Answer 4

您可以为通信组件设置角度Event Emmiter。
在这里，我为您创建了一个服务通信组件

@Injectable()
export class KagService {
  @Output() kag: EventEmitter<any> = new EventEmitter();

  constructor() {}

  setKag(bool) {
    this.kag.emit(bool);
  }

  getkag() {
    return this.kag;
  }

现在，点击链接时，您可以从导航组件中设置为kag

clickNavbarLink(){
   this.kagService.setKag(true);
}

您的标题组件

 showHeaderKag = false;
  ngOnInit() {
    this.kagService.getKag().subscribe(res => {
      this.showHeaderKag = res;    
    });
  }

showHeaderKag是你标题kag链接显示或隐藏的标志

如何通过单击事件将内容加载到另一个组件中？（角4）

4 个答案:

如何通过单击事件将内容加载到另一个组件中？ （角4）

4 个答案:

如何通过单击事件将内容加载到另一个组件中？（角4）