我从angular 6开始，对于如何调用jquery函数，我有点困惑。
这是我的应用程序. concomponent.html：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<div class="main">
<nav class="navigator">
  <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link" onclick="openNav()" href="#"><i class="material-icons">menu</i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>
</nav>
</div>
<router-outlet></router-outlet>

这是我的应用程序.组件.ts：

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
$(document).ready(function(){
    $('#mySidenav').click(function(){
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
    });
    $('#mySidenav').click(function(){
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
    });
});
  }
}

如果我使用了标签$（'div'）.click（function（）{并且只有一个函数，那么它就可以正常工作了。但是我想，我需要区分每个不同的id和它各自的函数。
从angular调用jQuery函数的最佳实践是什么？
谢谢你的时间。
此致。