Routerlink登錄後在主頁上

Question

我正在嘗試使用登錄功能創建一個Angular應用程序。

我用ng cli來生成空白的應用程序。它來與AppComponent。

我然後創建LoginComponent，並用功能的HomeComponent如下：

• LoginComponent將是應用程序的起始點。
• 成功登錄後，該應用程序將登錄到HomeComponent。

我app.module.ts是如下：

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LoginComponent, 
    HomeComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    ReactiveFormsModule, 
    HttpModule, 
    RouterModule.forRoot([ 
     { 
     path: 'home', 
     component: HomeComponent, 
     }, 
     { 
     path: 'login', 
     component: LoginComponent 
     }, 
    ]) 
    ], 
    providers: [AuthenticationService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

我app.component.html是如下：

<div id="mainPage"> 
     <router-outlet></router-outlet> 
</div> 

我login.component.ts有這樣的：

onSubmit(user){ 
    this.authenticationService.login(user) 
    .subscribe(
     data => { 
      this.router.navigate('/home'); 
     }, 
     error => { 
      console.log("Username or Password is incorrect!"); 
     });  
    } 

這工作完全正常。在登錄成功後，我登陸home.component.html，其中有home works!消息。

問題：我現在如何在我的主頁中有多個路由器鏈接來瀏覽不同的其他組件/頁面。例如。一個組件顯示用戶詳細信息（UserDetailComponent），另一個組件顯示用戶愛好（UserHobbyComponent），另一個組件顯示用戶地址（UserAddressComponent）。

我看到的所有例子都顯示router-links上面的標記在app.component.html的加法。我不想那樣。我想app.component.html只顯示登錄頁面，我希望主頁顯示所有其他鏈接。

任何關於如何解決這個問題的幫助都會很棒。任何鏈接顯示這將幫助我很多。

謝謝！

Answer 1

爲此你需要家庭的孩子，如下圖所示，

步驟：1 - 添加子路由的HomeComponent

import {UserDetailComponent} from 'path' 
import {UserHobby} from 'path' 


declarations: [ 
    AppComponent, 
    LoginComponent, 
    HomeComponent, 

    UserDetailComponent,      //added 
    UserHobbyComponent ],      //added 

imports: [ ..., 

    RouterModule.forRoot([ 
     { 
     path: 'home', 
     component: HomeComponent, 

     children:[       //children array added 
      { 
      path:'userdetail', 
      component:UserDetailComponent  
      }, 
      { 
      path:'userhobby', 
      component:UserHobbyComponent  //UserHobbyComponent at TOP 
      },    
     ] 
     }, 

     { 
     path: 'login', 
     component: LoginComponent 
     }, 
    ]) 

步：2 - 增加路由器的出口，以顯示家庭在home.html的孩子

home.html的

<h1> home works! </h1> 

    <nav> 
    <a routerLink="/userdetail" routerLinkActive="active">Detail</a> 
    <a routerLink="/userhobby" routerLinkActive="active">Hobby</a> 
    </nav> 


<router-outlet></router-outlet>