Angular2路由器没有渲染视图

Question

我在获取Angular2渲染视图时遇到问题。没有错误报告。

下面是代码，如果有人能帮助我将非常感激：

AppComponent：

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>