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>