angular2 routerOnActivate 未被调用

Question

我有以下组件，一个主要的和另一个。我想以编程方式从 main 导航到另一个。

主要

/// <reference path="../../node_modules/angular2/typings/browser.d.ts" />
/// <reference path="../../node_modules/angular2/core.d.ts" />
/// <reference path="../../node_modules/angular2/router.d.ts" />

import {Component, provide} from 'angular2/core';
import {RouteConfig, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router';

@RouteConfig([
    { path: '/Main/...', name: 'Main', component: Main}
])
@Component({
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS],
    selector: 'Main',
    template:
    '<div>
        <button type="button" (click)="navigate()">Navigate</button>
    </div>'
})
export class Main {
    constructor(private _router: Router) { }

    navigate() {
        this._router.navigateByUrl('Another');
    }
}

另一个

/// <reference path="../../node_modules/angular2/typings/browser.d.ts" />
/// <reference path="../../node_modules/angular2/core.d.ts" />
/// <reference path="../../node_modules/angular2/router.d.ts" />

import {Component, provide} from 'angular2/core';
import {RouteConfig, Router, ComponentInstruction, OnActivate,    ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router';

@RouteConfig([
    { path: '/Another/...', name: 'Another', component: Another}
])
@Component({
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS],
    selector: 'Another',
    template:
    '<div [style.display]="isActive()">
        <h1>i'm another!</h1>
    </div>'
})
export class Another implements OnActivate {
    constructor(private _router: Router) { }

    IsActive = false;

    isActive() {
        return (this.IsActive === true) ? 'block' : 'none';
    }

    routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
        this.IsActive = true;
        console.log("called! surprisingly.");
    }
}

似乎从未调用过routerOnActivate，虽然浏览器中的URL显示Main/Another。为什么不叫它？

Answer 1

您到 Another 的路线是 非终点站 路线，因为在末尾使用了省略号 ...。

您需要在模板中包含 <router-outlet></router-outlet>，以便路由器知道在何处呈现。

如果要导航到 Another，您需要在 @RouteConfig 中创建路径为 / 的默认路由。

{ path: '/', name: 'AnotherDefault', component: AnotherDefault, useAsDefault: true }

另一种选择是从路径末尾删除 ...，例如path: '/Another' 如果您想导航到它。

Answer 2

事实证明，如果您打算使用 Angular2 路由器导航到它们，则不应 bootstrap 您的组件。您需要在项目规划阶段规划您的导航策略。它将是经典模式，这意味着您将拥有 parent/child 关系和 hide/show 基于标志或路由模式，这意味着您不会 bootstrap 或在其父模板中添加组件标记和请改用 angular 的路由器。 Angular 本身将自动处理组件的所有导航和 showing/hiding。所需要的只是 RouteConfig 和 bootstrapping 您的主要组件。

另请注意，angular2 教程并非针对特定语言量身定制。如果您的网站在 ASP.NET MVC 中的路径为 www.something.com/angular/router，则 RouteConfig 中的 / 不是 www.something.com/，而是整个 URL.

关于 RouteConfig 路径，您只需要为每个组件定义子导航。

angular2 routerOnActivate 未被调用

angular2 routerOnActivate is not called

typescript

angular

angular2-routing