在Angular 2中的渲染模板之后運行jQuery代碼

Question

我有組件：

@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();
    }
}

使用模板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>

MainMenu類看起來像這樣：

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();
            }
        }
    }

}

MainMenu類的代碼不起作用，因為它在顯示的模板app/modules/main/page.htm 。 如何使MainMenu類的jQuery代碼開始正常工作？

Answer 1

我認為你需要使用ngOnInit（），因為它會在dom准備好后立即觸發：

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

您需要使用組件生命周期中可用的事件之一，一個好的資源是http://learnangular2.com/lifecycle/ 。

順便說一句，只是一個注釋，你正在使用jQuery進行DOM訪問，你不應該這樣做。 你應該留在角度環境中，盡量避免直接訪問dom。