angular 调用jquery javascrpt

1 angular.json

  "styles": [
          "src/styles.css"
        ],
        "scripts": [              
          "**node_modules/jquery/dist/jquery.min.js",   
          "src/script/custom.js"**
        ]

src/script/custom.js

function myTest() {
    alert('Welcome to custom js');
}

$(function() {
    alert('Hello jquery , in custom js');
});

下载安装Jquery：jquery.min.js

app.components.ts

import { Component } from '@angular/core';
declare var jQuery: any;
declare const myTest: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'soaptt';

  ngOnInit(){
    (function ($) {
      $(document).ready(function(){
        alert('Hello jquery , in ngOnInit');
      });
    })(jQuery);
  }

  onClick() {
    myTest();
  }
}

app.component.html

增加

  <div style="text-align:center">
    <h1>{{ title }}</h1>
    <button (click)="onClick()" class="btn btn-primary">Click Me</button>
  </div>

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

<router-outlet></router-outlet>