Angular 2：带有多个组件的router-outlet

时间：2016-08-27 19:01:09

标签： angular routing

嘿大家我对Angular 2路由有疑问：

我有这个应用程序组件（正常工作）

import {Component, provide, bootstrap} from 'angular2/angular2';
import {HTTP_PROVIDERS} from "angular2/http";
import {Factory} from './factory';
import {HallService} from './hall.service';
import {HallDetail} from './hall.detail';
import {
    APP_BASE_HREF,
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    ROUTER_PRIMARY_COMPONENT,
    HashLocationStrategy,
    LocationStrategy,
    RouteConfig,
} from "angular2/router";
import {FactoryList} from "./factory.list.component";
import {FactoryMap} from "./factory.map.component";
import {SettingsProperties} from "./settings-properties";
import {SettingsComponent} from "./settings.component";
import {Floors} from "./Component/floors";
import {RoomService} from "./service/room.service";
import {Campus} from "./Component/campus";
import {RoomDetail} from "./Component/room.detail";
import set = Reflect.set;


@Component({
    selector: 'app',
    directives: [ROUTER_DIRECTIVES],
    template: `
    <div id="nav">
        <ul>
            <li><a [router-link]="['/Factory']">Listview</a></li>
            <li><a [router-link]="['/FactoryMap']">Mapview</a></li>
            <li class="active"><a [router-link]="['/Settings']">Settings</a></li>
           <li><a [router-link]="['/Floors']">floors</a></li>
        </ul>
    </div>
    <router-outlet></router-outlet>`,
    providers: [Factory, SettingsProperties]
})

@RouteConfig([
    {path: "/", as: "Floors", component: Floors},
    {path: "/factory", as: "Factory", component: FactoryList},
    {path: "/floors", as: "Floors", component: Floors},
    {path: "/roomDetail/:id", as: "RoomDetail", component: RoomDetail},
    {path: "/factorymap", as: "FactoryMap", component: FactoryMap},
    {path: "/hallDetail/:id", as: "HallDetail", component: HallDetail},
    {path: "/settings", as: "Settings", component: SettingsComponent}
])

class AppComponent {

    constructor() {

    }

}

bootstrap(AppComponent, [
    Factory,
    HallService,
    RoomService,
    Campus,
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppComponent}),
    provide(APP_BASE_HREF, {useValue: "/"}),
    provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

然后我有这个Floors组件

import {Component, Injectable, bootstrap,provide, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import {HTTP_PROVIDERS} from "angular2/http";
import {Room} from "./room";
import {
    APP_BASE_HREF,
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    ROUTER_PRIMARY_COMPONENT,
    HashLocationStrategy,
    LocationStrategy,
    RouteConfig,
} from "angular2/router";
import {FloorList} from "./floor.list.component";
import {FloorMap} from "./floor.map.component";
import {RoomService} from "../service/room.service";
import {Router} from "angular2/router";
import {FactoryList} from "../factory.list.component";



@Component({
    template: `
    <div id="nav">
        <ul>
        <li>
        <select>
            <option *ngFor="#view of listViews "
            (change)="onSelectView($event.target.value)">{{view}}
            </option>
        </select>
        </li>
        <li>
        <select>
            <option *ngFor="#floor of listFloors "
            (change)="onSelectFloor($event.target.value)">{{floor}}
            </option>
        </select>
        </li>


        </ul>
    </div>
    <router-outlet></router-outlet>`,
    providers: [CORE_DIRECTIVES, FORM_DIRECTIVES]
})

@RouteConfig([
    {path: "/floorList/:id", as: "FloorList", component: FloorList},
    {path: "/floorMap/:id", as: "FloorMap", component: FloorMap},
])
export class Floors {
    private listViews:string[] = ["MapView", "Listview"];
    private listFloors:number[] = [1, 2, 3, 4];
    private selectedView:string = "MapView";
    private selectedFloor:number = 1;

    router:Router;

    constructor(router:Router) {
        this.router = router;
        this.setCorrectView();
    };

    onSelectFloor(floor:number) {
        this.selectedFloor=floor;
    }

    onSelectView(view:string) {
        this.selectedView=view;
        this.setCorrectView();
    }


    listView(floor:number) {
        this.router.navigate(['/FloorList', {id: floor}]);
    }

    mapView(floor:number) {
        this.router.navigate(['/FloorMap', {id: floor}]);
    }



    setCorrectView() {
        if (this.selectedView = "MapView") {
            this.mapView(this.selectedFloor);
        }
        else if (this.selectedView = "Listview") {
            this.listView(this.selectedFloor)
        }

    }
}

但是这给了很多错误。 我尝试了很多例子，添加了appComponent中的额外内容，......

我在这里遗漏了什么，

我想要完成那个楼层在appcomponent（工作）中显示 FloorList和FloorMap显示在楼层

我真的很想要帮助： 这是当前显示的错误（对不起，很多）：

EXCEPTION: Error during instantiation of Router! (RouterLink -> Router).
angular2.dev.js:35358 EXCEPTION: Error during instantiation of Router! (RouterLink -> Router).BrowserDomAdapter.logError @ angular2.dev.js:35358BrowserDomAdapter.logGroup @ angular2.dev.js:35369ExceptionHandler.call @ angular2.dev.js:12513(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 ORIGINAL EXCEPTION: Child routes are not allowed for "/". Use "..." on the parent's route path.BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12522(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12525(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 Error: Child routes are not allowed for "/". Use "..." on the parent's route path.
    at new BaseException (http://localhost:60330/Factory/node_modules/angular2/bundles/angular2.dev.js:26880:21)
    at assertTerminalComponent (http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2263:17)
    at RouteRegistry.config (http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2002:11)
    at http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2023:28
    at Array.forEach (native)
    at RouteRegistry.configFromComponent (http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2022:23)
    at new RootRouter (http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2599:21)
    at routerFactory (http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2735:22)
    at Injector._instantiate (http://localhost:60330/Factory/node_modules/angular2/bundles/angular2.dev.js:33616:19)
    at Injector._instantiateProvider (http://localhost:60330/Factory/node_modules/angular2/bundles/angular2.dev.js:33546:21)BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12526(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 ERROR CONTEXT:BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12529(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 _Context {element: a, componentElement: app, injector: Injector}componentElement: appelement: ainjector: Injector__proto__: ObjectBrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12530(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35368 EXCEPTION: TypeError: Cannot read property 'location' of undefined
angular2.dev.js:35358 EXCEPTION: TypeError: Cannot read property 'location' of undefinedBrowserDomAdapter.logError @ angular2.dev.js:35358BrowserDomAdapter.logGroup @ angular2.dev.js:35369ExceptionHandler.call @ angular2.dev.js:12513(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12515(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 TypeError: Cannot read property 'location' of undefined
    at angular2.dev.js:39311
    at Zone.run (angular2.dev.js:138)
    at Zone.run (angular2.dev.js:16773)
    at zoneBoundFn (angular2.dev.js:111)
    at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1507)
    at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1519)
    at lib$es6$promise$$internal$$publish (angular2.dev.js:1490)
    at angular2.dev.js:219
    at microtask (angular2.dev.js:16805)
    at Zone.run (angular2.dev.js:138)BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12516(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35368 EXCEPTION: TypeError: Cannot read property 'hostView' of undefined
angular2.dev.js:35358 EXCEPTION: TypeError: Cannot read property 'hostView' of undefinedBrowserDomAdapter.logError @ angular2.dev.js:35358BrowserDomAdapter.logGroup @ angular2.dev.js:35369ExceptionHandler.call @ angular2.dev.js:12513(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12515(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 TypeError: Cannot read property 'hostView' of undefined
    at ApplicationRef_._loadComponent (angular2.dev.js:39565)
    at tick (angular2.dev.js:39549)
    at Zone.run (angular2.dev.js:138)
    at Zone.run (angular2.dev.js:16773)
    at zoneBoundFn (angular2.dev.js:111)
    at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1507)
    at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1519)
    at lib$es6$promise$$internal$$publish (angular2.dev.js:1490)
    at angular2.dev.js:219
    at microtask (angular2.dev.js:16805)BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12516(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301

1 个答案:

答案 0 :(得分：2)

您必须确保在任何组件中使用@RouteConfig()...时，您还要在该组件中导入并注册 ROUTER_PROVIDERS 。

...
import {ROUTER_PROVIDERS} from 'angular2/router';

providers:[CORE_DIRECTIVES, FORM_DIRECTIVES, ROUTER_DIRECTIVES]
...

注意：您使用的是非常旧版本的angular2，请使用最新版本的Angular2更新自己，不需要进行此类导入和注册。

相关问题
最新问题