角度 2 和自定义下拉菜单答案

【问题标题】：angular 2 and custom dropdown menu角度 2 和自定义下拉菜单
【发布时间】：2016-09-21 09:47:42
【问题描述】：

我正在为 angular 2 创建一个功能区组件（主要是为了学习 angular 2 ^^），我想知道如何以 angular 2 方式制作下拉菜单。当然，我可以使用 bootstrap 甚至 jQuery，但我想知道从我的组件中执行此操作的最佳方法是什么。事实上，我可以在我的 TypeScript 文件中执行一个方法，该方法将执行以下操作：

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

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

创建一个在我单击按钮时应该显示菜单的指令会更好吗？在指令中处理 DOM 比在组件中处理 DOM 更好吗？

谢谢

【问题讨论】：

我认为最好的方法是创建一个下拉菜单组件并将其添加到您的视图中。
好的，但问题仍然存在。在“dopdown-menu”组件中，我在哪里执行定位 div 的 JavaScript？只是从一个方法内部？这不是“违反最佳做法”吗？
组件代码请仅更改数据。在组件模板中进行数据绑定。
对不起，但这对我没有帮助...即使我在模板中指定了某些内容，当用户单击按钮时，我仍然必须定位“div”，所以...在哪里把这个代码？

标签： javascript angular

【解决方案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/

【讨论】：

我想我明白你的意思了。我专注于这样一个事实，即当我单击菜单的箭头时，必须执行一些 Javascript 来计算要显示的 div 的位置，但也许我可以使用 CSS 实现这一点而无需任何计算......我会尝试那个，谢谢。