Angular 2模板范围的javascript答案

【问题标题】：Angular 2 template wide javascriptAngular 2模板范围的javascript
【发布时间】：2016-09-29 20:58:59
【问题描述】：

我构建了一个 Angular 2 应用程序，其中包含一些模板 javascript（例如打开/缩小菜单、关闭内容面板）。我想知道存储这种“模板范围”javascript 的最佳方式是什么？

例如：

// Panel toolbox
$(function () {
    $('.collapse-link').on('click', function() {
        var $BOX_PANEL = $(this).closest('.x_panel'),
            $ICON = $(this).find('i'),
            $BOX_CONTENT = $BOX_PANEL.find('.x_content');

        // fix for some div with hardcoded fix class
        if ($BOX_PANEL.attr('style')) {
            $BOX_CONTENT.slideToggle(200, function(){
                $BOX_PANEL.removeAttr('style');
            });
        } else {
            $BOX_CONTENT.slideToggle(200);
            $BOX_PANEL.css('height', 'auto');
        }

        $ICON.toggleClass('fa-chevron-up fa-chevron-down');
    });

    $('.close-link').click(function () {
        var $BOX_PANEL = $(this).closest('.x_panel');

        $BOX_PANEL.remove();
    });
});

是我需要在每个具有内容面板的组件上使用的 Javascript。我必须在每个组件中导入吗？或者我可以制作一个自定义指令并将其导入我的根组件中吗？

编辑： 好的，我很清楚我不应该使用这个 jquery，但我应该只用打字稿编写代码。我的问题仍然存在：

我应该在每个组件中导入我常用的函数，还是可以在父组件中定义一个函数，在子组件中使用？

【问题讨论】：

Angular2 模板引擎由于安全原因不会执行<script>。您将很难弄清楚您的组件与那段 JavaScript 之间的联系。

标签： angular angular2-template angular2-services

【解决方案1】：

尝试将您的代码放在ngAfterViewInit() 生命周期方法中在您的根组件中。也许您需要使用ElementRef 访问元素。

但我认为用 jquery 操作 dom 不是一个好主意。

【讨论】：