1

ディープ ルーティングを使用する Angular2 ベータ サンプルを実行しようとしていますが、route.navigate()機能しません。routeLink を使用すると、同じルートで機能します

@Component({
    templateUrl: './app/templates/main-menu.component.html',
    directives: [RouterOutlet, RouterLink],
    //providers: [ROUTER_PROVIDERS]
})

@RouteConfig([

        { path: '/operations/...', name: 'Operations', component: OperationsComponent, useAsDefault: true },
        { path: '/quotes', name: 'Quotes', component: QuotesComponent, useAsDefault: false},
        { path: '/customers', name: 'Customers', component: CustomersComponent, useAsDefault: false },
        { path: '/contacts', name: 'Contacts', component: ContactsComponent, useAsDefault: false },
        { path: '/maintenance', name: 'Maintenance', component: MaintenanceComponent, useAsDefault: false }//

])
export class MainMenuComponent implements OnInit{
    constructor(
        private _router: Router,
        private _routerParams: RouteParams

    ) { }

    menus: MenuItem[];
    selectedMenuItem: MenuItem;

    onSelect(item: MenuItem) {
        this.selectedMenuItem = item;
        this._router.navigate[item.name];


    }

export class MenuItem {
    constructor(public id: number, public name: string) { }
}

    export var Menus: MenuItem[] = [
        new MenuItem(1, 'Operations'),
        new MenuItem(2, 'Quotes'),
        new MenuItem(3, 'Customers'),
        new MenuItem(4, 'Contacts'),
        new MenuItem(5, 'Maintenance')
    ]

html テンプレートで routeLink を使用すると動作します:

<h1 style="margin-left:15px">Main Menu</h1>

<table>
    <tr>
        <td>
            <ul style="height:1000px">
                <li class="MainMenuItem" *ngFor="#item of menus" (click)="onSelect(item)" [class.MainMenuSelectedItem]="item === selectedMenuItem">
                    <div>
                        <div style="margin-left:15px; height:15px; width:15px; display:inline-block;
                    vertical-align:middle; margin-top:-2px;
                    background : linear-gradient(0deg, rgba(168, 213, 237, 1) 0%, rgba(164, 211, 236, 1) 15.72%, rgba(151, 204, 233, 1) 32.68%, rgba(129, 194, 227, 1) 50.24%, rgba(99, 178, 219, 1) 68.19%, rgba(60, 159, 210, 1) 86.27%, rgba(26, 142, 201, 1) 100%);
                    box-shadow : 1px 1px 0px rgba(255, 255, 255, 1);">
                        </div>


                        <a [routerLink]="[item.name]">{{item.name}}</a>
                    </div>
                </li>
            </ul> 
        </td>
        <td>
            <div  style="width:1450px;height:1000px;background-color:bisque;vertical-align: top;margin-left:-95px"> 
                <router-outlet></router-outlet>
            </div>
         </td>
    </tr>
</table>

前もって感謝します。

4

1 に答える 1

1

navigateメソッドの使い方が間違っていると思います。以下にサンプルを示します。

this._router.navigate( [ 'Details', { /* parameters */ }] );

Detailsで定義されたルート (name属性)の名前に対応します@RouteConfig。

したがって、あなたの場合は次のようなものが必要だと思います。

this._router.navigate([item.name]);

ディレクティブに関してrouter-link、構文は次のとおりです (Angular doc から)。

<a [routerLink]="['./User']">link to user component</a>

あなたの場合、それitem.nameはあなたのルートのパスではなく、名前だと思います...

お役に立てば幸いです、ティエリー

于 2016-01-04T09:03:32.240 に答える