angular 调用jquery javascrpt

最新推荐文章于 2024-05-30 11:11:42 发布

无哥

最新推荐文章于 2024-05-30 11:11:42 发布

阅读量127

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/willerwu/article/details/131856068

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该文章展示了如何在Angular应用中引入并使用jQuery。首先在`angular.json`配置文件中添加jQuery库和自定义的`custom.js`脚本。接着，在`app.component.ts`中声明jQuery变量，定义`ngOnInit`生命周期钩子以在页面加载时调用jQuery函数。同时，文章还演示了如何从TypeScript中调用`custom.js`中的函数。

摘要由CSDN通过智能技术生成

angular 调用jquery javascrpt

1 angular.json

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>