Angular 2 Routing with Home Page

Question

我正在学习 Angular2 Routing 并尝试显示欢迎页面。我的应用有三个页面

• 欢迎页面（它只是一个空白页面，只有指向其他路线的链接）
• 主页 - 一些文字和说明
• 待办事项列表页面 - 待办事项列表

问题是我无法显示欢迎页面。默认情况下，它会自动加载主页并显示来自 HomeComponent 的内容。

如屏幕截图所示，我只想显示 2 个链接。我只想在单击时从 Home/Todo 加载内容。但默认情况下，它会转到 localhost:xxx/Home 并加载主页。

我尝试将 '' 空白路径设置为 AppComponent 如下，但它加载 AppComponent 两次并显示链接两次。

{ path: '', component: AppComponent, pathMatch: 'full' },

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        RouterModule.forRoot([
            { path: 'home', component: HomeComponent },
            { path: 'todo', component: TodoListComponent },
            { path: '**', redirectTo: 'home', pathMatch: 'full' }
        ])
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        TodoListComponent
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

app.component.ts

import { Component } from "@angular/core"

@Component({
    moduleId: module.id,
    selector: 'app',
    template: `
    <div>
        <nav class='navbar navbar-default'>
            <div class='container-fluid'>
                <a class='navbar-brand'>{{pageTitle}}</a>
                <ul class='nav navbar-nav'>
                    <li><a [routerLink]="['/home']">Home</a></li>
                    <li><a [routerLink]="['/todo']">To Do</a></li>
                </ul>
            </div>
        </nav>        
     </div>
    <div class='container'>
            <router-outlet></router-outlet>
        </div>
     `
})
export class AppComponent {    
}

主页/home.component.ts

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,    
    templateUrl: "home.component.html"    
})
export class HomeComponent {
}

主页/home.component.html

<h1>Hello from Home Component</h1>
<h2>This is my first TODO App for Angular 2...</h2>

Answer 1

你需要删除这一行 { path: '**', redirectTo: 'home', pathMatch: 'full' }

你在上面一行中提到的是

如果 /home 或 /todo 以外的任何 url 出现，请重定向到 /home。以便它始终显示主页。

所以你的 app.module.ts 应该是

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent },
      { path: 'todo', component: TodoListComponent },
      { path: '**', redirectTo: 'home', pathMatch: 'full' }
    ])
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    TodoListComponent
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

这将解决问题。我试过了，它得到了修复

检查以下链接以在 angular 2 http://www.angularinfo.com/routings/ 中使用路由