[解決済み] angular 4でページごとに異なるレイアウトを設定する最適な方法

質問

私はangular 4の初心者です。私が達成しようとしていることは、私のアプリの異なるページのために異なるレイアウトのヘッダーとフッターを設定することです。私は3つの異なるケースを持っています。

1. ログイン、登録ページ (ヘッダーなし、フッターなし)

ルーティングを使用します。['login','register']（ログイン、登録

1. マーケティングサイトページ (これはルートパスであり、ヘッダーとフッターを持ちます。ほとんどの場合、これらのセクションはログインの前に来ます)

ルート : ['','about','contact'].

1. アプリのログインページ（このセクションには、すべてのアプリのページに対して別のヘッダーとフッターを用意していますが、このヘッダーとフッターは、マーケティングサイトのヘッダーとフッターとは別のものです）

ルート : ['dashboard','profile']です。

ルーターコンポーネントのhtmlにヘッダーとフッターを追加して、アプリを一時的に動かしています。

より良い方法を教えてください。

これは私のコードです。

appapp.routing.ts

   const appRoutes: Routes = [
        { path: '', component: HomeComponent},
        { path: 'about', component: AboutComponent},
        { path: 'contact', component: ContactComponent},
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },
        { path: 'dashboard', component: DashboardComponent },
        { path: 'profile', component: ProfileComponent },


        // otherwise redirect to home
        { path: '**', redirectTo: '' }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

app.component.html

<router-outlet></router-outlet>

app/home/home.component.html

<site-header></site-header>
<div class="container">
    <p>Here goes my home html</p>
</div>
<site-footer></site-footer>

app/about/about.component.html

<site-header></site-header>
<div class="container">
    <p>Here goes my about html</p>
</div>
<site-footer></site-footer>

app/login/login.component.html

<div class="login-container">
    <p>Here goes my login html</p>
</div>

app/dashboard/dashboard.component.html

<app-header></app-header>
<div class="container">
    <p>Here goes my dashboard html</p>
</div>
<app-footer></app-footer>

私が見たのは この質問 を見ましたが、その答えから明確なイメージを得ることはできませんでした。

どのように解決するのですか？

子ルートを使用することで解決できます。

動作するデモは https://angular-multi-layout-example.stackblitz.io/ または、編集は https://stackblitz.com/edit/angular-multi-layout-example

以下のようにルートを設定します。

const appRoutes: Routes = [
    
    // Site routes goes here 
    { 
        path: '', 
        component: SiteLayoutComponent,
        children: [
          { path: '', component: HomeComponent, pathMatch: 'full'},
          { path: 'about', component: AboutComponent }
        ]
    },
    
    // App routes goes here
    { 
        path: '',
        component: AppLayoutComponent, 
        children: [
          { path: 'dashboard', component: DashboardComponent },
          { path: 'profile', component: ProfileComponent }
        ]
    },

    // no layout routes
    { path: 'login', component: LoginComponent},
    { path: 'register', component: RegisterComponent },
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);