Question

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

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

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

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

我试图设置＆＃39;＆＃39; 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

我认为显示HomeComponent的原因是因为当网址为/ home时，您的<router-outlet></router-outlet>将使用home更改基础组件。你的app.module.ts

中也有这一行

{ path: '**', redirectTo: 'home', pathMatch: 'full' }，

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

{ path: '**', redirectTo: 'home', pathMatch: 'full' } 或者重定向到''（或新的PageNotFoundComponent）。

还要确保在页面加载时没有选择菜单中的任何项目（主页或待办事项）。

Answer 2

您需要删除此行 {path：'**'，redirectTo：'home'，pathMatch：'full'}

你在上面提到的内容是

如果/ home或/ todo之外的其他网址请重定向到/ home。所以它总是显示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 { }

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

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

与主页的Angular 2路由

2 个答案: