jQuery在Angular2中不起作用

Question

I am new in Angular2. I have done this once, but when I am trying to set up the same environment in my home PC, I am unable to do this.

In my add-page.component.ts , I am declaring $ and jquery like this:-

declare var $ : any;
declare var jquery : any;

Then in the ngAfterViewInit function, I am running this jquery.

ngAfterViewInit(){
    $(function(){
        if($('#desc').length>0)
        {
            $("#desc").Editor();  
            $(".Editor-editor").html($('#desc').text());
            $("#desc").val($('.Editor-editor').html()); 
        }
    });
}

However, the jquery isn't working. When I am writing alert('Hi') inside ngAfterViewInit() but outside $(document).ready(function(){}) , I am getting the alert. But alert inside $(document).ready(function(){}) isn't working. So, that means the ngAfterViewInit is working but not the $(document).ready(function(){}) .

By the way, jquery library is added in the index.html file:-

<script src="assets/admin-assets/bower_components/jquery/jquery.min.js"></script>

What am I doing wrong?

Answer 1

You don't need this line of code:

declare var jquery : any;

Also make sure that you importing ngAfterViewInit from angular using this line of code:

import { ngAfterViewInit } from '@angular/core';

also make sure that you jquery file exists in the components folder, if you don't know how, try to use the CDN by changing the reference to be "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" instead in your script tag.