在Angular 2

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 java.util.*;
import static java.lang.System.out;
    public static void main(String[] args) {
    }
    public static boolean hasTwoA(String s) {
        int aCounter = 0;
        for (int i = 0; i < s.length(); i++) {
            if (s.charAt(i) == 'a') {
                aCounter++;
            } else if (aCounter == 2) {
                return true;
            } else if (i == s.length() - 1 && aCounter != 2) {
                return false;
            }
        }
    }
}

Answer 2

您需要使用组件生命周期中可用的其中一个事件，一个好的资源是http://learnangular2.com/lifecycle/。

顺便说一句，只是注意，您正在使用jQuery进行DOM访问，而您不应该这样做。你应该留在Angular Environment，尽量避免直接访问dom。