Typescript 未调用angular2 routerOnActivate

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

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

//
/// 
/// 
从'angular2/core'导入{组件，提供}；
从“angular2/Router”导入{RouteConfig，Router，Router_提供程序，Router_指令}；
@线路图([
{path:'/Main/…'，name:'Main'，component:Main}
])
@组成部分({
指令：[路由器指令]，
提供者：[路由器提供者]，
选择器：'Main'，
模板：
'
导航
'
})
出口类主要{
构造函数（专用_路由器：路由器）{}
导航（）{
这个._router.navigateByUrl（‘另一个’）；
}
}

另一个

/// <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.");
    }
}

//
/// 
/// 
从'angular2/core'导入{组件，提供}；
从“angular2/Router”导入{RouteConfig、Router、ComponentInstruction、OnActivate、Router_PROVIDERS、Router_Directive}；
@线路图([
{path:'/other/…'，name:'other'，component:other}
])
@组成部分({
指令：[路由器指令]，
提供者：[路由器提供者]，
选择器：“另一个”，
模板：
'
我是另一个！
'
})
导出另一个实现OnActivate的类{
构造函数（专用_路由器：路由器）{}
IsActive=假；
isActive（）{
return（this.IsActive==true）？'block'：'none'；
}
routerOnActivate（下一个：组件指令，上一个：组件指令）{
this.IsActive=true；
log（“调用了！出乎意料地”）；
}
}

---

虽然浏览器中的URL显示了

Main/other

，但似乎从未调用

routerOnActivate

。为什么不叫它呢？

由于最后使用了省略号

…

，您到另一个

的路线是非终点的路线

您需要在模板中包含
，以便路由器知道在何处渲染

如果要导航到另一个

，则需要在

@RouteConfig

中为另一个创建路径为

/

的默认路由

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

---

另一个选项是从路径的末尾删除

…

，例如

路径：'/other'

，如果您想导航到它。

事实证明，如果您计划使用Angular2路由器导航到组件，则不应该引导组件。您需要在项目规划阶段规划导航策略。这将是经典模式，这意味着您将拥有父/子关系，并基于标志或路由模式隐藏/显示，这意味着您不会在其父模板中引导或添加组件标记，而是使用angular的路由器。Angular本身将自动负责所有导航和显示/隐藏组件。所需要的只是

RouteConfig

和引导您的主要组件

另外请注意，angular2教程并不是针对特定语言定制的。如果在ASP.NET MVC中有一个路径为

www.something.com/angular/router

的网站，那么

RouteConfig

中的

/

不是

www.something.com/

而是整个URL

---

关于

RouteConfig

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

可能多填充没有正确设置，它在页面上正确注册。顺序与angular2 quick start的建议相同。控制台中没有可见的错误，因此我假设所有内容都已正确加载。您是否看到

我是另一个

当您导航时，它可能无法正确导航，或者尝试使用

路由器进行导航。navigate

而不是

路由器。navigateByUrl

如果删除“…”，则会出现错误“不允许子路由”/。在父路由路径上使用“…”。另外，“另一个”也有子路由。