角度2的新手和es2015的新版本 我是
应用结构
app
|---js
|-- All js files
|---ts
|--- html
|--- contact_display.html
|--- contact_block.html
|--- edit_contact_form.html
|--- navbar.html
|--- new_contact_form.html
|--- main.ts
|--- contact_display.component.ts
|--- contact_block.component.ts
|--- edit_contact.component.ts
|--- navbar.component.ts
|--- new_contact.component.ts
|--- contact.service.component.ts
|--- contact.ts
|--- contact.service.component.ts
|--- mock_contact.component.ts
|--- typings
|-- underscore
|--- underscore.d.ts
|---node_modules
|---resources
|---typings
|--- index.html
|--- package.json
|--- tsconfig.json
|--- typings.json
文件就是这样 的 Main.ts
import { bootstrap } from 'angular2/platform/browser';
import { Component, provide } from 'angular2/core';
import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import { NavbarComponent } from './navbar.component';
import { ContactDisplayComponent } from './contact_display.component';
import { NewContact } from './new_contact.component';
import { EditContact } from './edit_contact.component';
@Component({
selector:'app-start',
template:`
<navbar></navbar>
<router-outlet></router-outlet>
`,
directives : [NavbarComponent,ROUTER_DIRECTIVES]
})
@RouteConfig([
{path:'/',name:'Home',component:ContactDisplayComponent},
{path:'/New_Contact',name:'New_Contact',component:NewContact},
{path:'/Edit_Contact/:id',name:'Edit_Contact',component:EditContact}
])
export class Main{
}
bootstrap(Main,
[
ROUTER_PROVIDERS
]
);
我使用导航路线转到编辑联系页面
import { Component, OnInit} from 'angular2/core';
import { ContactBlockComponent } from './contact_block.component';
import { ContactService } from './contact.service';
import { Contact } from './contact';
import { ROUTER_DIRECTIVES, Router } from 'angular2/router';
@Component({
selector :'contact-display',
templateUrl:'app/ts/html/contact_display.html',
styleUrls : ['../resources/contact_detail.css'],
directives:[ ContactBlockComponent, ContactBlockComponent, ROUTER_DIRECTIVES ],
providers:[ContactService]
})
export class ContactDisplayComponent
{
public contacts:Contact[];
isSelected:boolean;
selectedContact;
constructor(private _contactService:ContactService, private _router:Router){
this.isSelected = true;
}
onContactSelection(contact_picked){
console.log(contact_picked.contact_phone);
this.selectedContact = contact_picked;
return false;
}
getContacts(){
this._contactService.getContacts().then((contacts:Contact[]) => this.contacts = contacts);
}
/********* Navigate to Edit Contact ****************
onEditContact(contact_picked){
let userId = contact_picked.id;
this._router.navigate(['Edit_Contact',{id:userId}]);
}
}
控制台上的错误就像这样
GEThttp:// localhost:3000 / app / js / navbar.component 404(未找到) GEThttp:// localhost:3000 / app / js / contact_display.component 404(未找到) 错误:XHR错误(404 Not Found)链接http://localhost:3000/app/js/navbar.component(...) GEThttp:// localhost:3000 / app / js / new_contact.component 404(未找到) GEThttp:// localhost:3000 / app / js / edit_contact.component 404(未找到)
所有这些文件都是我在main.ts中以相同顺序导入的文件
import { NavbarComponent } from './navbar.component';
import { ContactDisplayComponent } from './contact_display.component';
import { NewContact } from './new_contact.component';
import { EditContact } from './edit_contact.component';
包含系统配置的索引文件
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
paths: {
underscore: '/node_modules/underscore/underscore.js'
}
});
System.import('/app/js/main.js')
.then(null, console.error.bind(console));
</script>
答案 0 :(得分:1)
我检查了你的项目,以及它在刷新时无效的原因是因为网络服务器没有将请求重定向到index.html
。要绕过此操作,您可以按照文档中的说明使用HashLocationStrategy
,或让您的开发和生产网络服务器将初始请求重定向到index.html
:
bootstrap(Main, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
除此之外,我建议您使用此System Config
,因此'app/js'
周围的引号和.js
中System.import
的删除:
System.config({
packages: {
'app/js': {
format: 'register',
defaultExtension: 'js'
}
},
paths: {
underscore: '/node_modules/underscore/underscore.js'
}
});
System.import('/app/js/main')
.then(null, console.error.bind(console));
或者,在继续进行此项目之前,请更新到Angular2的rc.1
版本,其中所有内容都已更改。