angular 2 / typescript 访问 and/or 操作元素的方式是什么？

Question

使用框架 (materialize-css) 它建议我将以下内容放入 '$( document ).ready(function(){})'使响应式可折叠菜单正常工作：

$(".button-collapse").sideNav();

我如何在 angular 中执行此操作？ 我知道 ngAfterContentInit 类似于 '$( document ).ready(function() {})':

ngAfterContentInit(): void {
    //What do I put here?
  }

您可以在下面看到显示汉堡包图标的屏幕截图（仅在移动屏幕尺寸上可见）：Image of my menu

这是我的 html (app.component.html):

<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">Javascript</a></li>
      <li><a href="mobile.html">Mobile</a></li>
    </ul>
    <ul class="side-nav" id="mobile-demo">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">Javascript</a></li>
      <li><a href="mobile.html">Mobile</a></li>
    </ul>
  </div>
</nav>

Answer 1

在 Whosebug 上进行更多研究并尝试替代标签后，我找到了完美的答案！

我必须确保 jquery 已安装并且 angular-cli.json 在一开始就包含 jquery 节点模块参考！！

在我的 app.component.ts 中，我只需声明“$”即可。

Link 回复：

angular 2 / typescript 访问 and/or 操作元素的方式是什么？

What is the angular 2 / typescript way to access and/or manipulate elements?

html

css

jquery

typescript-typings

angular