Angular 2路由與主頁

我正在學習Angular2路由並嘗試顯示歡迎頁面。我的應用程序有Angular 2路由與主頁

三頁

歡迎頁面（這只是一個空白頁面，只是鏈接到其他途徑）
首頁 - 一些文本和說明
待辦事項列表頁 - 待辦事項列表

問題是我無法管理顯示歡迎頁面。它會自動加載主頁並默認顯示來自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>

來源

2017-01-15 TTCG

我認爲正在顯示HomeComponent的原因是因爲當網址是/ home您<router-outlet></router-outlet>將改變底層組件與home。你也有這條線在你的app.module.ts

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

，這意味着您的所有網址不匹配/home或/todo會讓你HomeComponent彈出的。您可以嘗試刪除重定向：

{ path: '**', redirectTo: 'home', pathMatch: 'full' } 或改爲改爲''（或新的PageNotFoundComponent）。

還要確保在頁面加載時，菜單中沒有任何項目（家庭或待辦事項）被選中。

來源

2017-01-15 02:47:49 John

你需要刪除此行 {路徑： '**'，redirectTo： '家'，pathMatch： '全'}

你在上面行提的是

如果任何網址其他/ home或/ todo來請redirectTo到/ 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/

使用路由

來源

2017-10-18 20:47:20 Jeyaprakash

Angular 2路由與主頁

回答

相關問題