javascript - Angular 2 和自定义下拉菜单

Question

我正在为 Angular 2 创建一个 Ribbon 组件(本质上是为了学习 Angular 2 ^^)，我想知道如何以 Angular 2 方式制作下拉菜单。当然，我可以使用 bootstrap 甚至 jQuery，但我想知道在我的组件中执行此操作的最佳方法是什么。事实上，我可以在我的 TypeScript 文件中执行一个方法，该方法将执行以下操作:

("my-dom-menu").slideDown()

但是，我知道在 Angular 1 中，直接从 Controller 内部搞乱 DOM 并不是最佳实践，所以我猜 Angular 2 仍然是这种情况。

创建一个在单击按钮时显示菜单的指令是否是一个更好的主意？在指令中处理 DOM 是否比在组件中处理 DOM 更好？

谢谢

Answer 1

您的菜单将是一个组件。

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

@Component({
   selector:'my-drop-down-menu',
   templateUrl:'./my-drop-down-menu.html' // this is where you would add the div
})

export class MyMenuComponent{
    // actions happen here
}

html

<my-drop-down-menu></my-drop-down-menu> <-- pulls in my-drop-down-menu.html -->

如果您阅读 angular.io 上的教程，您很快就会得到它 https://angular.io/docs/ts/latest/tutorial/