Question

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

我有这个应用程序组件（正常工作并显示其内容）

import {Component, ViewEncapsulation} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {bootstrap} from "angular2/bootstrap";
import {Floors} from "./Component/floors";
import {RoomService} from "./service/room.service";
import {Campus} from "./Component/campus";
import {RoomDetail} from "./Component/room.detail";


@Component({
    selector: 'my-app',
    templateUrl: 'app/partials_html/app.component.html',
    styleUrls: ['app/partials_css/app.component.css'],
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: "/...", as: "Floors", component: Floors},
    {path: "/Floors/...", as: "Floors", component: Floors},
    {path: "/roomDetail/:id", as: "RoomDetail", component: RoomDetail}
])
export class AppComponent {
    constructor() {
    }
}

此组件的HTML：

<div id="nav">
    <ul>
        <li><a href="#/Floors/FloorList/1">floors</a></li>
    </ul>
</div>
<div>
<router-outlet></router-outlet>
</div>

然后我有这个Floors组件

import {Component, ViewEncapsulation} from 'angular2/core';
import {Router, RouteParams} from 'angular2/router';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {CORE_DIRECTIVES} from "angular2/common";
import {FORM_DIRECTIVES} from "angular2/common";
import {Room} from "./../entity/room";
import {FloorList} from "./floor.list.component";
import {FloorMap} from "./floor.map.component";
import {RoomService} from "../service/room.service";
import {Campus} from "./campus";
import {RoomDetail} from "./room.detail";


@Component({
    selector:'floors',
    templateUrl: 'app/partials_html/floors.html',
    directives: [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);
        }
        if (this.selectedView = "Listview") {
            this.listView(this.selectedFloor)
        }

    }
}

但它没有显示它的HTML内容：

<div id="nav">
    <ul>
        <li>
            <label>test</label>
            <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>

我尝试了很多例子，添加了appComponent中的额外内容......

我在这里遗漏了什么，

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

我真的很想要帮助

angular2 2.0.0-beta.6路由

0 个答案: