如何在 angular 2+ 中包含 javascipt 代码？

Question

这是 HTML 代码：

<div id="myNav" class="overlay">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
          <a href="#">About</a>`enter code here`
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>
      </div>

      <h2>Fullscreen Overlay Nav Example</h2>
      <p>Click on the element below to open the fullscreen overlay navigation menu.</p>
      <p>In this example, the navigation menu will slide in, from left to right:</p>
      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

我应该在 angular 项目中的什么地方包含这个脚本标签才能让它工作？

<script>
    function openNav() {
      document.getElementById("myNav").style.width = "100%";
    }

    function closeNav() {
      document.getElementById("myNav").style.width = "0%";
    }
    </script>

Answer 1

在 Angular 中直接访问 DOM 不是一个好主意。理论上，您可以在组件 controller 中使用document.getElementById()或document.querySelector()等方法访问 DOM。但不要这样做。

还有许多其他更好的方法来操作 controller 中的 DOM。在您的情况下，一种简单快捷的方法是使用[style.width.%] attribute 属性绑定。 尝试以下

组件.html

<div [style.width.%]="customWidth" id="myNav" class="overlay">

在 controller 中，您可以执行以下操作

组件.ts

export class SampleComponent implements OnInit {
  customWidth = 100;   // <-- default width percentage

  public openNav() {
    this.customWidth = 100;
  }

  public closeNav() {
    this.customWidth = 0;
  }

  ngOnInit() {
  }
}

Angular提供了很多更精细的控件来修改DOM。 例如，您可以使用许多其他 CSS 单位，如[style.width.px] 、 [style.width.em] 、 [style.width.in]等。 您可以使用ngStyle 。 有关更高级的 DOM 功能，请查看 Angular Renderer2 。