2

我有以下问题：

侧边栏中是我的菜单，如果我单击按钮，我想加载组件标题中的三个新按钮（见图）。

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

最好的问候安德烈亚斯

这是我的仪表板

4

3 回答 3

3

有几个可用的选项可以解决您的问题。对于我将提供的解决方案，我假设您的右侧菜单和主菜单都已放入您的根组件中。

我要做的是使用将链接到您的路线的解析器。然后，此解析器将更新您的菜单。这意味着您的菜单已使用 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;
     }
}

这是解析器。不要忘记将其链接到您的路线以使其执行。当然，如果您想从 Resolver 以外的任何其他位置执行此操作，则可以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 等）

于 2018-01-06T12:00:55.377 回答
0

您可以创建快捷方式组件。它将如何工作？

  • 从菜单组件中获取所选菜单的列表
  • 当用户（单击）在共享的 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); }
};
于 2018-01-06T11:31:48.880 回答
0

如果您的组件非常简单，那么您可以使用以下代码片段。

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

于 2018-01-06T14:39:18.567 回答