Angular2路由器沒有渲染視圖

我在獲取Angular2渲染視圖時遇到問題。沒有錯誤報告。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>

謝謝。

來源

2016-03-01 KnowHoper

你有沒有設置你的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>

來源

2016-03-01 10:14:18

嗨亨利，是的，我試過了。沒有運氣。有沒有一種方法來調試呢？什麼都沒有放入routerOutlet元素 – KnowHoper

嘿！你使用哪種方法：'PathLocation'或'HashBang'？你可以在你的問題中加入你如何引導你的應用程序？謝謝！ –

我想你應該使用''而不是''。我更新了我的答案... –

Angular2路由器沒有渲染視圖

回答

相關問題