Angular2 路由器不呈现视图

Question

我在让 Angular2 呈现视图时遇到问题。没有报告错误。

这是代码，如果有人能帮助我，我将不胜感激：

应用程序组件：

import { Component, View } from 'angular2/core';
import { MasterCourseDetailsComponent } from './master.course.details';
import { MasterCourseListComponent } from './master.course.list';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';

@Component({
    selector: 'master-course'
})

@View({
        directives: [ROUTER_DIRECTIVES, MasterCourseListComponent, MasterCourseDetailsComponent],
    templateUrl: '/ECAV.Admin/App/views/master-course-app.html'
})

@RouteConfig([
    { path: '/masterCourselist', name: 'MasterCourseList', component: MasterCourseListComponent, useAsDefault:true},
    { path: '/masterCourseDetails:', name: 'MasterCourseListDetails', component: MasterCourseDetailsComponent }
])
export class MasterCourseAppComponent {
    title: string;
    constructor() {
        this.title = 'App title';
    }
}

硕士课程列表组件：

import {Component, View, OnInit} from 'angular2/core';
import { RouterLink, RouteParams } from 'angular2/router';
import {ROUTER_DIRECTIVES}  from 'angular2/router';

@View({
    templateUrl: '/Site.Admin/App/views/master-course-list.html',
    directives: [ROUTER_DIRECTIVES ],
})
export class MasterCourseListComponent implements OnInit {
    ngOnInit() {
        console.log('ngOnInit');
    }
}

硕士课程详情：

import {Component, View, OnInit} from 'angular2/core';
import { RouterLink, RouteParams } from 'angular2/router';
import {ROUTER_DIRECTIVES}  from 'angular2/router';
@View({
   templateUrl: '/Site.Admin/App/views/master-course-details.html',
    directives: [ROUTER_DIRECTIVES],
})
export class MasterCourseDetailsComponent implements OnInit {
    ngOnInit() {
        console.log('ngOnInit');
    }
}

开机

<script src="~/node_modules/angular2/bundles/router.dev.js"></script>
<master-course>Loading...</master-course>
<script>
    System.import('/Site.Admin/App/boots/boot.master.course')
        .then(null, console.error.bind(console));
</script>

硕士课程视图：

<header>
    <nav>
        <ul>
            <li>
                <a [routerLink]="['MasterCourseList']">Course List</a>
            </li>
            <li>
                <a [routerLink]="['MasterCourseListDetails']">Master Course Details</a>
            </li>
        </ul>
    </nav>
</header>
<a [routerLink]="['MasterCourseList']">Home</a>

<main>
  <routerOutlet></routerOutlet>
</main>

列表视图

<div> here is the master course List</div>

详情查看

 <div> here is the master course details</div>

谢谢。

Answer 1

您是否在 HTML 条目文件中设置了基本标签：

<base href="/">

使用PathLocationStrategy（默认）时需要。有关详细信息，请参阅 Angular2 文档：https://angular.io/docs/ts/latest/api/router/PathLocationStrategy-class.html.

编辑

我认为你应该使用 <router-outlet></router-outlet> 而不是 <routerOutlet></routerOutlet>:

<main>
  <router-outlet></router-outlet>
</main>

Angular2 路由器不呈现视图

Angular2 Router not rendering views

angular2-routing

angular