Question

我正在使用reddit克隆作为我的第一个Angular 2应用程序，代码在这里：

https://github.com/claysmith/hackerspulse（在.NET Core中使用VS代码）

我正在尝试设置reddit上的路由，如果你去/ r / sub，它会为不同的subreddit加载文章。

这是我的路由器：

const routes: Routes = [
{ path: '', redirectTo: '/r/home', pathMatch:'full' },
{ path: 'r/:id', component : SubverseComponent }];

我想在加载它们时转到home-sub，当给出route / r / something时它将加载我的子程序组件，我将在ng init上根据子程序从db加载文章。

https://github.com/claysmith/hackerspulse/tree/master/wwwroot/app/subverse

但是，当我启动网站时，路线似乎没有任何效果。

我把它挂在我的主app.module.ts

上

@NgModule({
declarations: [
  AppComponent,
  ArticleComponent,
  SubverseComponent // <-- added this
],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]})

但是当我尝试转到subreddit时，我会收到如下错误：

GET http://localhost:5000/r/systemjs.config.js失败（当它位于主路径system.config.js时，正在查找/ r / for javascript）

https://i.imgur.com/heixmdQ.png

注意它不应该在/ r /目录中查找javascript / css，它应该在它上面的主目录中查找。

此外，在加载localhost时，我没有被重定向到/ r / home。当进入/ r / test时，它不会加载子组件HTML并给出子视图名称的javascript日志。

我可能犯了初学者的错误。请帮忙。

编辑：我已经将我的应用程序与MVC进行了更多集成，我在startup.cs中添加了

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            // when the user types in a link handled by client side routing to the address bar 
            // or refreshes the page, that triggers the server routing. The server should pass 
            // that onto the client, so Angular can handle the route
            routes.MapRoute(
                name: "spa-fallback",
                template: "{*url}",
                defaults: new { controller = "Home", action = "Index" }
            );
        });

现在/ r /目录中的javascript文件填充了页面的html代码。救命？

编辑：取得进展，现在它正在尝试加载子组件但不能 https://i.imgur.com/Leki6tY.png

Answer 1

所以，在我的app.component.ts中，我必须将模板设置为路由器插座，如

template: '<router-outlet></router-outlet>',

它有效！：〜）

Angular 2 reddit clone routing

1 个答案: