ログイン後のホームページ上のRouterlink

Question

ログイン機能を持つ角度アプリを作成しようとしています。

ブランクアプリを生成するために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は以下の通りです：

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

これは完全に正常に動作します：

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

私login.component.tsはこれを持っています。ログインに成功すると、私はhome works!メッセージを持っているhome.component.htmlに着陸します。

質問：ホームページに複数のルータリンクを設定して、他のさまざまなコンポーネントやページをナビゲートできるようになりました。例えば。 1つのコンポーネントはユーザーの詳細（UserDetailComponent）を示し、別のコンポーネントはユーザーの趣味（UserHobbyComponent）を示し、さらに別のコンポーネントはユーザーのアドレス（UserAddressComponent）を示します。

上記のすべての例は、の上に<router-outlet>のタグが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>