【发布时间】:2016-03-05 06:28:23
【问题描述】:
以下代码不会自动显示列表,我必须创建一个链接并点击。有人可以帮忙吗?
谢谢
import { Component } from 'angular2/core';
import { HTTP_PROVIDERS } from 'angular2/http';
import { CourseListComponent } from '../lists/course.list';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import EndPointService from '../../Services/EndPointService';
import {CourseDetailsComponent} from '../course.details';
@Component({
selector: 'course-router-app',
templateUrl: '/Admin/App/views/router/course-router-app.html',
directives: [ROUTER_DIRECTIVES],
providers: [
HTTP_PROVIDERS,
ROUTER_PROVIDERS,
EndPointService
]
})
@RouteConfig([
{ path: '/', name: 'Courses', component: CourseListComponent, useAsDefault: true },
{ path: '/details/:id', name: 'CourseDetails', component: CourseDetailsComponent }
])
export default class CourseRouterComponent {
}
课程列表组件
import { Component, View, OnInit } from 'angular2/core';
import { NgFor } from 'angular2/common';
import EndPointService from '../../Services/EndPointService';
import LogService from '../../Services/LogService';
import * as dtos from '../../view-models/ICourseViewModel';
import {Router, RouteParams} from 'angular2/router';
@Component({
selector: 'course-list',
providers: [EndPointService, LogService],
templateUrl: '/Admin/App/views/lists/course-list.html'
})
export class CourseListComponent implements OnInit {
public courses: dtos.ISimpleCourseViewModel[];
constructor(private _endPointService: EndPointService, private _router: Router, private _logService: LogService) {
}
showDetails(course: dtos.ISimpleCourseViewModel) {
this._logService.log('showing details ' + course.ID);
this._router.navigate(['CourseDetails', { id: course.ID }]);
}
ngOnInit(): any {
this._endPointService.getAllCoursesSimple().subscribe(
(response) => {
this.courses = this.courses = response.json();
},
(err) => {
console.log(err);
});
}
public diagnostic(): string {
return JSON.stringify(this.courses);
}
}
我也设置了<base href="/">。
我没有添加视图,因为我认为它们并不重要。任何人都可以帮忙吗?我看不出我的代码与呈现默认路由的在线示例有何不同。
【问题讨论】:
-
这段代码看起来不错。你的
CourseListComponent是什么样的? -
你在 index.html 上添加了
<base href="/">吗? -
您必须在此处输入
CourseListComponent代码。 -
已更新。谢谢大家
标签: angular angular2-routing angular2-directives