带主页的Angular 2路由

我正在学习Angular2路由，并尝试显示欢迎页面。 我的应用程序有三个页面

欢迎页面这只是一个空白页面，只有指向其他路线的链接 主页-一些文本和说明 待办事项列表页面-待办事项列表 问题是我无法显示欢迎页面。默认情况下，它会自动加载主页并显示HomeComponent中的内容

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

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

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

app.module.ts

app.component.ts

home/home.component.html

我认为显示HomeComponent的原因是，当url为/home时，您将使用home更改基础组件。您的app.module.ts中也有此行

{路径：'**'，重定向到：'home'，路径匹配：'full'}

这意味着所有与/home或/todo不匹配的URL都将使HomeComponent弹出。您可以尝试删除重定向：

{路径：'**'，重定向到：'home'，路径匹配：'full'} 或重定向到或新的PageNotFoundComponent

还要确保在页面加载时没有选择菜单中的“主页”或“待办事项”。

我认为显示HomeComponent的原因是，当url为/home时，您将使用home更改基础组件。您的app.module.ts中也有此行

{路径：'**'，重定向到：'home'，路径匹配：'full'}

这意味着所有与/home或/todo不匹配的URL都将使HomeComponent弹出。您可以尝试删除重定向：

{路径：'**'，重定向到：'home'，路径匹配：'full'} 或重定向到或新的PageNotFoundComponent

---

还要确保在页面加载时没有选择菜单中的“主页”或“待办事项”。

您需要删除此行 {路径：'**'，重定向到：'home'，路径匹配：'full'}

你在上面提到的是

如果出现了/home或/todo以外的任何url，请重定向到/home。使其始终显示在主页上

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

@NGD模块{ 进口：[ 浏览器模块， RouterModule.forRoot[ {path:'home'，component:HomeComponent}， {路径：'todo'，组件：TodoListComponent}， {路径：'**'，重定向到：'home'，路径匹配：'full'} ] ], 声明：[ 应用组件， HomeComponent， TodoListComponent ], 引导：[AppComponent]， }

---

导出类AppModule{}您需要删除此行 {路径：'**'，重定向到：'home'，路径匹配：'full'}

你在上面提到的是

如果出现了/home或/todo以外的任何url，请重定向到/home。使其始终显示在主页上

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

@NGD模块{ 进口：[ 浏览器模块， RouterModule.forRoot[ {path:'home'，component:HomeComponent}， {路径：'todo'，组件：TodoListComponent}， {路径：'**'，重定向到：'home'，路径匹配：'full'} ] ], 声明：[ 应用组件， HomeComponent， TodoListComponent ], 引导：[AppComponent]， } 导出类AppModule{}

@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 { }

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 {    
}

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

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

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