Angular 4 jquery不起作用
我正在尝试将jquery用于我的Angular 4应用程序。我已经按照所有步骤在我的Angular 4上安装jquery。但是jquery仍然无法工作。 我把jquery代码放在这样的组件上。
home.component.ts
import * as jQuery from 'jquery' import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { constructor(db: AngularFireDatabase,public authService: AuthService,public afAuth: AngularFireAuth,) { $(document).ready(function(){ $("#showAppinfo").click(function(){ $("#appinfo").slideToggle(); }); }); ngOnInit() {} } 我的Html是以下home.component.html
This is Home page!!
Basic App-info
- Publiser: {{ (appinfo | async)?.Publisher }}
- Publication_Year: {{ (appinfo | async)?.Publication_Year }}
- Version: {{ (appinfo | async)?.Version }}
- Registered Users: {{ (appinfo | async)?.Rusers }}
- Languages: {{ (appinfo | async)?.Language }}(Only)
但是，当我点击
Basic App-info
。 如果我在正确的位置使用jquery代码，你能告诉我吗？ 问题出在代码或jquery安装上？
基本问题是您试图在构造函数中操作模板。 但是当组件构造函数执行时， #showAppinfo和#appInfo元素尚不存在，因为尚未构建视图。
依赖于视图元素的操作需要最早在ngAfterViewInit生命周期钩子中执行
export class HomeComponent implements OnInit, OnAfterViewInit ... ngAfterViewInit(){ // do your template manipulation here }
您可以使用console.log($("#showAppinfo"))类的东西来测试它，你会看到它没有记录任何元素constructor() ，但它在ngAfterViewInit()
按照适合我的步骤：
安装jquery npm install jquery
安装ts类型npm install @ types / jquery
在.angular-cli.json中添加jquery.min.js：
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]
使用Token，Provider和Factory为JQuery创建服务：
import { InjectionToken } from '@angular/core'; import * as $ from 'jquery'; export const JQUERY_TOKEN = new InjectionToken('jquery'); export function jQueryFactory() { return $; } export const JQUERY_PROVIDER = { provide: JQUERY_TOKEN, useFactory: jQueryFactory };
在模块中添加Provider：
@NgModule({ declarations: [ ... ], providers: [ JQUERY_PROVIDER, ... ] })
在任何组件中使用DI：
constructor( @Inject(JQUERY_TOKEN) private $: JQueryStatic )
快乐：D
this.$('body').css('background-color', 'red')
不知道slideToggle（）正在做什么，但是如果你将#ref添加到h2，则会在Angular中进行FYI ..然后你可以添加
@ViewChild('ref') h2El:Element;
在与HTML关联的Typescript中。 做相当于$（“＃showAppinfo”）..
如果你在HTML中使用它
...
你有点击处理程序..所以在Typescript添加
handler() { this.h2El.slideToggle(); }
在Angular 2/4中使用jQuery的最简单和最短的方法
第一步
来自index.html
我的测试项目的\ src \ index.html在
在app-root标记下面输入jQuery cdn。
...
第二步
我的测试项目的\ src \程序\测试\ test.component.ts
转到所需的组件.ts脚本。
import { Component, OnInit } from '@angular/core'; // this line will allow you to use jQuery declare var $: any; @Component({ ... })
第三步
我的测试项目的\ src \程序\测试\ test.component.ts
通过在jQuery语法$(() => { /* content here */ })记录'I<3Cats'测试jQuery。
export class TestComponent implements OnInit { constructor() { } ngOnInit() { $(() => { console.log('hello there!'); }); } }
您也可以将此技术与其他javscript库一起使用。 我不知道这是否安全，但一定会帮到你。 相当
你的onInit方法在构造函数中，按以下方式尝试
constructor(db: AngularFireDatabase, public authService: AuthService, public afAuth: AngularFireAuth) { $(document).ready(function () { $("#showAppinfo").click(function () { $("#appinfo").slideToggle(); }); }); } ngOnInit() { }}