登录后主页上的Routerlink

Question

我正在尝试使用Login功能创建一个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中<router-outlet>标记上方添加了app.component.html。我不希望这样。我希望app.component.html只显示登录页面，我希望主页显示所有其他链接。

如何解决这个问题的任何帮助都会很棒。 显示这一点的任何链接都会对我有所帮助。

谢谢！

Answer 1

为此你需要Home的孩子，如下所示，

步骤：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 - 添加router-outlet以在home.html中显示Home的孩子

<强> 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>