Question

在我的下面的angular2路由程序中，如果我删除useAsDefault：true并获得以下错误，则路由无效。

例外：链接＆＃34; [＆＃34;笔＆＃34;]＆＃34;不解析终端指令。在[[＆＃39; Pen＆＃39;] AppComponent @ 4:19]
中

**This is Child routing Code:**

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {RouteParams} from "angular2/router";
import {Pen1Component} from "./pen/app.component.pen1";
import {Pen2Component} from "./pen/app.component.pen2";


@Component({
    templateUrl:'dev/products/app.component.pen.html'
    template: `
            <nav>
                <ul>
                <li>
                <a [routerLink]="['Pen1']">Pen1</a></li>

                <li>
                <a [routerLink]="['Pen2']">Pen2</a></li>
                </ul>

            </nav>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    })
@RouteConfig([
    {path: '/', name: 'Pen1', component: Pen1Component},
    {path: '/pen2', name: 'Pen2', component: Pen2Component}

export class PenComponent {
}

这是父路由代码：

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {PenComponent} from './products/app.component.pen';
import {BookComponent} from './products/app.component.book';


@Component({
    selector: 'my-app',
    template: `
            <nav>
                <ul>
                <li>
                <a [routerLink]="['Pen']">Pen</a></li>

                <li>
                <a [routerLink]="['Book',{id:1}]">Book</a></li>
                </ul>

            </nav>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers:[ROUTER_PROVIDERS]

})

@RouteConfig([
    {path: '/pen/...', name: 'Pen', component: PenComponent},
    {path: '/book/:id', name: 'Book', component: BookComponent}


])


export class AppComponent {

}

但是如果添加此代码，它的工作正常。

@RouteConfig([
    {path: '/', name: 'Pen1', component: Pen1Component, useAsDefault: true},
    {path: '/pen2', name: 'Pen2', component: Pen2Component}

Answer 1

请在app.component.ts中尝试此代码。

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {PenComponent} from './products/app.component.pen';
import {BookComponent} from './products/app.component.book';


@Component({
    selector: 'my-app',
    template: `
            <nav>
                <ul>
                <li>
                <a [routerLink]="['Penn']">Pen</a></li>

                <li>
                <a [routerLink]="['Book',{id:1}]">Book</a></li>
                </ul>

            </nav>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers:[ROUTER_PROVIDERS]

})

@RouteConfig([
    {path: '/penn/', name: 'Penn', component: PenComponent},
    {path: '/book/:id', name: 'Book', component: BookComponent}

])


export class AppComponent {

}

我将Pen替换为Penn。

您可以在没有useAsDefault: true的情况下运行Angular2。这不会返回任何错误，在这种情况下输出将为none。

子路由Angular2没有使用AsDefault：true

1 个答案: