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，但似乎永远不会调用Main/Another。为什么不打电话？

Answer 1

由于最后使用省略号Another，您前往...的路线是非终端路线。

您需要在模板中包含<router-outlet></router-outlet>，以便路由器知道要渲染的位置。

如果您要导航到/，则需要在@RouteConfig中为Another创建一个路径为{ path: '/', name: 'AnotherDefault', component: AnotherDefault, useAsDefault: true }的默认路由。

...

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

Answer 2

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

另请注意，angular2教程不适合特定语言。如果您在ASP.NET MVC中有一个包含路径www.something.com/angular/router的网站，则/中的RouteConfig不是www.something.com/，而是整个网址。

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

angular2 routerOnActivate未调用

2 个答案: