Question

我的应用程序通常在所有路由器中加载，但在我使用时带有params的路由器无法加载应用程序。

示例：@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .fade-in { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; } .fade-in.one { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; /*margin-left: auto; margin-right: auto;*/ /*width: 10%; height: 3%;*/ } .fade-in.two { -webkit-animation-delay: 1.2s; -moz-animation-delay:1.2s; animation-delay: 1.2s; /*margin-left: auto; margin-right: auto;*/ /* width: 10%; height: 3%;*/ } .fade-in.three { -webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; animation-delay: 1.6s; /*margin-left: auto; margin-right: auto;*/ /* width: 10%; height: 3%;*/ } .fade-in.four { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; padding-left: 12%; /* margin-left: auto; margin-right: auto;*/ /* width: 10%; height: 3%; }*/ } .fade-in.five { -webkit-animation-delay: 2.4s; -moz-animation-delay: 2.4s; animation-delay: 2.4s; /*margin-left: auto; margin-right: auto;*/ /* width: 10%; height: 3%;*/ } .box{ padding-left:8%; width: 16.7%; height: 5%; position: relative; margin: .8%; float: left; overflow:inherit; /*border: 1px solid #333; background: #999;*/ }

路由器代码是：

localhost:3000/usersid/:id

和params路由器的组件

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 }
];

错误讯息：

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，然后只有角度路由器才会完成其余的工作。

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 }
];

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

2 个答案: