在Angular 2中的渲染模板之后运行jQuery代码

Question

I have component:

@Component({
    selector: 'fx-app',
    templateUrl: 'app/modules/main/page.html',
    directives: [RouterOutlet,RouterLink,ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS,
        HTTP_PROVIDERS
    ]
})

export class MainComponent {
    constructor(){
        var menu = new MainMenu();
    }
}

With its template app/modules/main/page.htm :

<div id="menu">
    <div class="logo"></div>
    <div class="menuContainer">
        <ul>
            <li>
                <a class="withNested closed">
                    <span class="word">Users</span>
                </a>
            </li>
            <li>
                <a [routerLink]="['Products']">
                    <span class="word">Products</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<div id="content">
    <router-outlet></router-outlet>
</div>

<div id="footer"></div>

Class MainMenu looks like this:

export class MainMenu{

    public menu = null;
    public allLinks = null;

    constructor(){
        this.menu = $('#menu');
        this.allLinks = $('#menu').find('a');
        this.menu.find('ul a').click(this.setItem);
        console.log('init MainMenu');
    }

    public setItem (){
        this.allLinks.removeClass('active');
        $(this).addClass('active');
        if($(this).hasClass('withNested')){
            if($(this).hasClass('opened')){
                $(this).removeClass('opened');
                $(this).addClass('closed');
                $(this).next('ul').slideUp();
            }else{
                $(this).removeClass('closed');
                $(this).addClass('opened');
                $(this).next('ul').slideDown();
            }
        }
    }

}

Code of class MainMenu does not work, because it works before the displayed template app/modules/main/page.htm . How to make that jQuery-code of class MainMenu started to work correctly?

Answer 1

I think you need to use ngOnInit() as it fires as soon as the dom is ready:

import {OnInit} from 'angular2/core';

export class MainMenu implements OnInit {

    public menu = null;
    public allLinks = null;

    constructor(){

    }

    ngOnInit() {
        this.menu = $('#menu');
        this.allLinks = $('#menu').find('a');
        this.menu.find('ul a').click(this.setItem.bind(this));
        console.log('init MainMenu');
    }

    public setItem (e){
        this.allLinks.removeClass('active');
        $(e.currentTarget).addClass('active');
        if($(e.currentTarget).hasClass('withNested')){
            if($(e.currentTarget).hasClass('opened')){
                $(e.currentTarget).removeClass('opened');
                $(e.currentTarget).addClass('closed');
                $(e.currentTarget).next('ul').slideUp();
            }else{
                $(e.currentTarget).removeClass('closed');
                $(e.currentTarget).addClass('opened');
                $(e.currentTarget).next('ul').slideDown();
            }
        }
    }

}

Answer 2

You need to use one of the events available on a component life cycle , a good resource is http://learnangular2.com/lifecycle/ .

By the way, just a note, you are using jQuery for DOM access and you shouldn't do that. You should stay in the Angular Environment, try to avoid accessing dom directly.