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>

Angular2路由器无法呈现视图

1 个答案: