Угловое 2: маршрутизатор-розетка с компонентами multiplle

Привет всем У меня есть вопрос с угловыми 2 маршрута:Угловое 2: маршрутизатор-розетка с компонентами multiplle

я есть это приложение компонент (работает нормально)

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

и затем у меня есть этот компонент этажей

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 показаны на этажах

Я бы действительно apreciete помощь: здесь ошибки в настоящее время показано (жаль, что много):

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

источник

2016-08-27 Laurens Wolf

You обязательно, всякий раз, когда вы используете @RouteConfig()... в любом компоненте, вы также импортируете и регистрируете ROUTER_PROVIDERS в этом компоненте.

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

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

Примечание: вы используете очень старую версию angular2, пожалуйста, обновите себя с последней версией Angular2, которая не требует, такого ввоза и регистрации.

источник

2016-08-27 19:33:18 micronyks

личный помощник маршрутизатора не помог ему, я тонкий k, я делаю что-то не так с импортом других 2-х мая, но я обновлю версию версии для подсказки :), это действительно было в альфа-версии. –

Угловое 2: маршрутизатор-розетка с компонентами multiplle

ответ

Смежные вопросы