当我刷新页面时 Angular2，而不是在路由器参数中加载页面

Question

我的应用程序在所有路由器中正常加载，但是当我使用带有参数的路由器时，应用程序无法加载。

示例： localhost:3000/usersid/:id

路由器代码是：

const appRoutes: Routes = [
  { path: 'user', component: UserComponent },
  { path: 'info', component: InfoComponent },
  { path: 'users', component: UsersComponent },
  { path: 'usersid/:id', component: UsersIdComponent },
  { path: '', component: MainComponent },
  { path: '**', component: MainComponent }
];

和 params 路由器的组件

import{Component} from '@angular/core'
import { ActivatedRoute } from '@angular/router';
import * as Datastore from 'nedb';

@Component({
  moduleId : module.id ,
  templateUrl : 'userid.component.html' ,
  styles : [`
    .SamRouter {
        overflow-y: auto;
    }
    `]
})

export class UsersIdComponent {
  id: any;
  private sub: any;
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
      this.sub = this.route.params.subscribe( params  => {
      // this.id = +params['id']; // (+) converts string 'id' to a number
      this.id = params['id'] || 0 ;

        // In a real app: dispatch action to load the details here.
     });
        console.log(  this.id )
   }
   ngOnDestroy() {
    //  this.sub.unsubscribe();
    }

}

错误信息：

http://localhost:3000/users/node_modules/bootstrap/dist/js/b ‌ ootstrap.min.js 无法加载资源：服务器响应状态为 404（未找到） http://localhost:3000 /users/styles.css加载资源失败：服务器响应状态为 404（未找到）

Answer 1

这取决于您使用的服务器。 您需要将服务器配置为在路由不存在时转到 index.html。 当您按 F5 时，服务器会搜索不存在的文件，服务器应返回 index.html，只有这样 angular 路由器才会完成剩下的工作。

Answer 2

改变这个：

const appRoutes: Routes = [
  { path: 'user', component: UserComponent },
  { path: 'info', component: InfoComponent },
  { path: 'users', component: UsersComponent },
  { path: 'usersid/:id', component: UsersIdComponent },
  { path: '', component: MainComponent },
  { path: '**', component: MainComponent }
];

对此：（注意Routes数组中的第四个元素）

const appRoutes: Routes = [
  { path: 'user', component: UserComponent },
  { path: 'info', component: InfoComponent },
  { path: 'users', component: UsersComponent },
  { path: 'users/:id', component: UsersIdComponent },
  { path: '', component: MainComponent },
  { path: '**', component: MainComponent }
];