Angularjs 非SPA的角度2（静态页面）

我在网上遇到的所有示例都是SPA，我想知道Angular 2是否有一种内置方式来处理静态页面。具体来说，假设我使用Angular 2构建博客站点，我希望用户可以直接访问特定的帖子，而不必使用默认的home组件（顺便说一句，它也会加载大量服务器端配置）。我的意思是，我如何让用户直接转到，而不显示404或配置**页面以供无法访问

只是需要一些指示，谢谢

假设我的文件夹结构是这样的

/posts
/shared
/users

@RouteConfig([
    { path: './shared/...', name: 'Shared', component: SharedComponent },
    { path: './users/...', name: 'Users', component: UserComponent },
    { path: './posts/...', name: 'Posts', component: PostComponent }
])

@RouteConfig([
    { path: '/', name: 'List', component: ListComponent, useAsDefault: true },
    { path: '/:id', name: 'Post', component: PostComponent },
    { path: '/:id/gallery', name: 'Gallery', component: GalleryComponent },
    { path: '/:id/comments', name: 'Comments', component: CommentListComponent },
])

我的主路由器是这样的

/posts
/shared
/users

@RouteConfig([
    { path: './shared/...', name: 'Shared', component: SharedComponent },
    { path: './users/...', name: 'Users', component: UserComponent },
    { path: './posts/...', name: 'Posts', component: PostComponent }
])

@RouteConfig([
    { path: '/', name: 'List', component: ListComponent, useAsDefault: true },
    { path: '/:id', name: 'Post', component: PostComponent },
    { path: '/:id/gallery', name: 'Gallery', component: GalleryComponent },
    { path: '/:id/comments', name: 'Comments', component: CommentListComponent },
])

后路由器是这样的

/posts
/shared
/users

@RouteConfig([
    { path: './shared/...', name: 'Shared', component: SharedComponent },
    { path: './users/...', name: 'Users', component: UserComponent },
    { path: './posts/...', name: 'Posts', component: PostComponent }
])

@RouteConfig([
    { path: '/', name: 'List', component: ListComponent, useAsDefault: true },
    { path: '/:id', name: 'Post', component: PostComponent },
    { path: '/:id/gallery', name: 'Gallery', component: GalleryComponent },
    { path: '/:id/comments', name: 'Comments', component: CommentListComponent },
])

---

看起来你在找路由器。看一下文档： 和。它是这样使用的：

@Component({ ... })
@RouteConfig([
  {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
  {path:'/heroes',        name: 'Heroes',       component: HeroListComponent},
  {path:'/hero/:id',      name: 'HeroDetail',   component: HeroDetailComponent}
])
export class AppComponent { }

---

如果不查看默认的主组件，就很难说出完美的答案（我不知道你说的是什么意思）

好的，在angular2中，您可以有一个组件，它可以定义/设置其他组件的路由，以及它们的相关视图

---

假设在单个组件中定义路由后，

如果使用下面的

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

bootstrap(AppComponent, [provide(APP_BASE_HREF).toValue(location.pathname)]);

Angular2将能够为您提供所需的路由，所以您不需要为服务器配置一些额外的路由设置。然后，您将能够访问

---

如果您选择下面的

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

bootstrap(AppComponent, [provide(APP_BASE_HREF).toValue(location.pathname)]);

对于此配置，angular2将无法为您提供所需的路由，因此需要配置服务器端路由。然后，您将能够访问

---

因此，简而言之，如果需要/请求路径退出，它会将用户带到该路径。

我想我理解您的问题。您需要以某种方式配置web服务器软件（例如Apache），这不是Angular2配置问题。您需要配置web服务器，以便每当它接收到url请求（如/or/posts或/posts/123）时，它都会为您的主index.html文件提供服务。Angular将在启动时自动显示正确的内容。

我知道我晚了一年，但您的问题是，无论您使用什么web服务器，都需要将URL重写为web应用程序的index.html。如果它这样做了，那么当您转到server/hero/123时，web服务器会将其指向web应用程序的index.html，并且您的web应用程序将使用路由器转到HeroDetail组件，而不显示默认的主组件。因为您没有重写，web服务器甚至没有启动angular应用程序，而是尝试为文件服务器/hero/123提供服务，该文件不存在，因此它会为您提供404

---

仅供参考，这仍然是一个SPA（单页应用程序）。

我不清楚这个问题是关于什么的。一个猜测是。您可能需要设置

HashLocationStrategy

（请参阅SimonHawesome的答案）这可能会有所帮助-我对正常的Angular 2路由没问题，我需要的是在地址栏中键入404而不会出现错误。HashLocationStrategy不能解决此问题，因为当我将地址复制到另一个浏览器选项卡时，我会得到一个空页面，我认为这是因为它绕过了boot.ts或app.component中加载的一些模块。我只是想知道是否有一些默认的内置方法可以帮助我解决这个问题。然后你需要配置你的服务器以支持HTML5 pushState。我理解，如果我在地址栏中添加链接，页面仍然加载，没有错误404