1
Angular2 Routingを学習し、Welcome Pageを表示しようとしています。 マイアプリは（単に他のルートにリンクしてそれだけで空白のページです）ウェルカムページ3ページAngular 2 Routing with Home Page
- を持って
- ホームページ - いくつかのテキストと説明
- 藤堂一覧ページ - のToDo
問題は、ウェルカムページを表示できないことです。ホームページを自動的に読み込み、デフォルトでHomeComponentからコンテンツを表示します。
スクリーンショットに示すように、私は2つのリンクのみを表示したいと思います。私はそれがクリックされたときだけホーム/ Todoからコンテンツをロードしたいと思う。しかし、デフォルトでは、localhost：xxx/Homeに行き、ホームページをロードします。
私は以下のようにAppComponentに「」空白のパスを設定しようとしましたが、それは二回AppComponentをロードし、リンクを2回表示されます。
{ 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>
