Angular 2 - 刷新路由页面...如果仅在路由上刷新我无法找到组件我将使用导航

时间:2016-05-21 11:30:50

标签: angular

角度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>

1 个答案:

答案 0 :(得分:1)

我检查了你的项目,以及它在刷新时无效的原因是因为网络服务器没有将请求重定向到index.html。要绕过此操作,您可以按照文档中的说明使用HashLocationStrategy,或让您的开发和生产网络服务器将初始请求重定向到index.html

bootstrap(Main, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

除此之外,我建议您使用此System Config,因此'app/js'周围的引号和.jsSystem.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版本,其中所有内容都已更改。