角度4メインページ（ローカルホスト：4200）と私のウェブサイトのルーティングインデックス

Question

私の問題は、次のとおりです。

私のアプリでありindex.htmlが：

<app-root></app-root> 

と私のようなカップルのコンポーネントがあります。
1.ヘッダー
2.について
3.オファー
4.プロジェクト
5.連絡先
6.Footer

マイapp.component.htmlが含まれていますHeaderComponentオン

<app-header></app-header> 

<router-outlet></router-outlet> 

<app-footer></app-footer> 

を各コンポーネント（について、オファー、プロジェクト、連絡先）へrouterLinksがある

私はローカルホスト上で、希望：4200 /を、 RouterLinkがクリックされたときにAboutComponentコンテンツを表示し、それを他と置き換えます。今私のlocalhost：4200 /は空で、Aboutページはlocalhost：4200/aboutにあります。

"index page"をlocalhost：4200 /に置いて、サブページがトリガーされると非表示にできますか？（例：localhost：4200/contact）？

Answer 1

Routes配列（docs）で可能です。

const appRoutes: Routes = [ 
    { path: '', component: AboutComponent }, 
    { path: 'contact', component: ContactComponent } 
    // your other routes 
]; 

これはAppModuleにインポートする必要があります。あなたのルーティングモジュール（アプリ-routing.module.ts）で

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(appRoutes) 
    ], 
    ... 
}) 
export class AppModule { } 

Answer 2

、あなたはおよそ

{ path: '', redirectTo: '/about', pathMatch: 'full' }, 

にルートディレクトリをリダイレクトするか、またはあなたがAboutComponent

を使用するルートパスを設定することができます

{ path: '', component: AboutComponent }, 

ので、あなたの完全なルーティング・ファイルは、最初のオプション

import { NgModule } from '@angular/core'; 
    import { Routes, RouterModule } from '@angular/router'; 
    import { AboutComponent } from './about.component'; 
    import { OfferComponent } from './offer.component'; 
    import { ProjectsComponent } from './projects.component'; 
    import { ContactComponent } from './contact.component'; 

    const appRoutes: Routes = [ 
     { path: '', redirectTo: '/about', pathMatch: 'full' }, 
     { path: 'about', component: AboutComponent }, 
     { path: 'offer', component: OfferComponent }, 
     { path: 'projects', component: ProjectsComponent }, 
     { path: 'contact', component: ContactComponent } 
    ]; 

    @NgModule({ 
     imports: [RouterModule.forRoot(appRoutes)], 
     exports: [RouterModule] 
    }) 
    export class AppRoutingModule { 

    } 

のために、このようになります

、またはセクションオプションを使用すると、次のようになります。

import { NgModule } from '@angular/core'; 
    import { Routes, RouterModule } from '@angular/router'; 
    import { AboutComponent } from './about.component'; 
    import { OfferComponent } from './offer.component'; 
    import { ProjectsComponent } from './projects.component'; 
    import { ContactComponent } from './contact.component'; 

    const appRoutes: Routes = [ 
     { path: '', component: AboutComponent }, 
     { path: 'offer', component: OfferComponent }, 
     { path: 'projects', component: ProjectsComponent }, 
     { path: 'contact', component: ContactComponent } 
    ]; 

    @NgModule({ 
     imports: [RouterModule.forRoot(appRoutes)], 
     exports: [RouterModule] 
    }) 
    export class AppRoutingModule { 

    }