Angular 8：在组件中调用外部JavaScript函数

我试图在标题组件中调用纯JavaScript函数来设置菜单的动画；我已经在assets文件夹中创建了menu.js文件，并将其添加到angular.json文件中，如下所示：

 "scripts": [
   "src/assets/javascript/menu.js",
]

menu.js

function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

我想问一下如何在我的header组件中实现它

import { Component, OnInit } from '@angular/core';
import {  } from '../search-filter-form/search-filter-form.component'

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.sass']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

html

 <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn"
      onclick="closeNav()">&times;</a>https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_full#
    <a href="#">Spectacles</a>
    <a href="#">Restaurants</a>
    <a href="#">Sorties</a>
    <a href="#">Questions fréquantes</a>
    <a href="#">Chèques Cadeaux</a>
    <a href="#">À propos</a>
    <a href="#">Condition de vente</a>
  </div>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_full#
☰

这里似乎有太多问题。如果你想制作动画，为什么不使用内置的角度动画；此外，您可能希望了解一下这一点，因为@Ploppy指出，您应该使用角度内置动画，但您也不应该像在vanila JS中那样直接访问DOM，为此有Renderer2。医生：这里似乎有很多问题。如果你想制作动画，为什么不使用内置的角度动画；此外，您可能希望了解一下这一点，因为@Ploppy指出，您应该使用角度内置动画，但您也不应该像在vanila JS中那样直接访问DOM，为此有Renderer2。文件：