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'; 
    } 
}

Master Course Список компонентов:

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>

Master Course Вид:

<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 Маршрутизатор, не отображающий виды

ответ

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