Angular 2 个模板宽度 javascript

Question

我构建了一个 Angular 2 应用程序，它有一些模板 javascript（例如打开/缩小菜单、关闭内容面板）。我想知道存储这种类型的 "template wide" 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 但我应该用打字稿写代码。我的问题仍然存在：

我应该在每个组件中导入我经常使用的功能，还是可以在父组件中定义一个功能，然后在子组件中使用它？

Answer 1

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

访问元素

但我不认为用 jquery 来操纵 dom 是个好主意。

Angular 2 个模板宽度 javascript

Angular 2 template wide javascript

angular

angular2-template

angular2-services