programing

각도 4에서 페이지마다 다른 레이아웃을 설정하는 가장 좋은 방법

iphone6s 2023. 8. 20. 10:33
반응형

각도 4에서 페이지마다 다른 레이아웃을 설정하는 가장 좋은 방법

나는 angle 4가 처음입니다.제가 달성하고자 하는 것은 제 앱의 페이지마다 다른 레이아웃 헤더와 바닥글을 설정하는 것입니다.세 가지 다른 사례가 있습니다.

  1. 로그인, 등록 페이지(헤더, 바닥글 없음)

routes: ['register', 'register']

  1. 마케팅 사이트 페이지(루트 경로이며 머리글과 바닥글이 있으며, 대부분 이러한 섹션은 로그인하기 전에 나옵니다.)

경로 : [","정보","연락처"]

  1. 앱 로그인 페이지(모든 앱 페이지에 대해 이 섹션의 머리글 및 바닥글이 다르지만 이 머리글 및 바닥글은 마케팅 사이트의 머리글 및 바닥글과 다름)

routes : ['profile', 'profile']

라우터 구성 요소 html에 머리글과 바닥글을 추가하여 앱을 임시로 실행합니다.

좀 더 나은 접근법을 알려주세요.

내 코드는 다음과 같습니다.

app\app.sys.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.vmdk

<router-outlet></router-outlet>

app/home/home.component.message

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

app/about/about.component.message

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

app/message/message.component.message

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

app/message/message.component.message

<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);

어린이 등을 사용할 수 있습니다.

const appRoutes: Routes = [
    { path: '', component: MainComponent,
        children:{
            { path: 'home'  component:HomeComponent},
            { path: 'about', component: AboutComponent},
            { path: 'contact', component: ContactComponent},
               ..others that share the same footer and header...

        }
    },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'admin', component:AdminComponent, 
         children{
            { path: 'dashboard', component: DashboardComponent },
            { path: 'profile', component: ProfileComponent }
               ..others that share the same footer and header...
         }
    }
    { path: '**', redirectTo: '' }
];

주 구성 요소 및 관리 구성 요소 유사

<app-header-main></app-header-main>
<router-outlet></router-outlet>
<app-footer-main></app-footer-main>

경로에 대한 별도의 다른 파일에 대한 포스트 토크

레이아웃 및 공유 요소가 라우팅 구조와 실제로 일치하지 않거나 경로별로 일부 요소를 숨기거나 표시해야 하는 경우가 있습니다.그러한 경우를 위해 저는 다음과 같은 전략을 생각할 수 있습니다(예를 들어 보겠습니다).app-header-main구성요소 - 모든 공유 페이지 요소에 적용됩니다.):

입력 & CSS 클래스

다음과 같은 공유 요소의 내부 모양을 제어하는 입력 또는 CSS 클래스를 제공할 수 있습니다.

  1. <app-header-main [showUserTools]="false"></app-header-main>

또는

  1. <app-header-main class="no-user-tools"></app-header-main>그런 다음 :host(no-user-tools)를 사용하여 필요한 항목을 표시/숨깁니다.

또는

  1. 경로 수준에서(하위 또는 하위):

    {
  path: 'home',
  component: HomeComponent,
  data: {
    header: {showUserTools: true},
  },
},

를 통해 액세스합니다.ActivatedRoute이와 같이:this.route.data.header.showUserTools

템플릿 참조 입력

안에서.app-header-main구성 요소:

@Input() rightSide: TemplateRef<any>;

형식입력TemplateRef<any>당신이 먹이를 줄 수 있는 곳.ng-template 직접적으로 

<app-header-main [rightSide]="rightside"></app-header-main>
<ng-template #rightside>your content here</ng-template>

명명된 슬롯 트랜스클루전

명명된 슬롯 변환을 사용하도록 앱-헤더-메인을 작성할 수 있습니다.

app-header-main 템플릿 내부:

<ng-content select="[rightSide]"><ng-content>

용도:

<app-header-main class="no-user-tools">
  <div rightSide>your content here</div>
</app-header-main>

ng-content + View를 사용하여 문제를 해결할 수 있습니다.특정 레이아웃을 사용하는 각 페이지 구성요소에 레이아웃의 하위 주입.

이 일반적인 사용 사례에서 라우터를 사용하는 것은 항상 해결책처럼 보였습니다.원하는 것은 As의 Layouts(레이아웃)와 유사합니다.웹 양식의 NetMVC 또는 마스터 페이지 등

이것과 씨름한 후에 저는 결국 다음과 같은 것을 얻었습니다.

작업 데모 참조: https://stackblitz.com/edit/angular-yrul9f

shared.component-session.ts

import { Component } from '@angular/core';

@Component({
  selector: 'shared-component-layout',
  template: `
  <div *ngIf="!hideLayoutHeader" style="font-size: 2rem;margin-bottom: 10px;">
    Layout title: {{layoutHeader}}
    <ng-content select=".layout-header">    
    </ng-content>
  </div>
  <ng-content select=".layout-body">
  </ng-content>
  `
})
export class SharedComponentLayout {
  layoutHeader: string;
  hideLayoutHeader: boolean;
}

page.component-base.ts

import { Component, ViewChild } from '@angular/core';
import { SharedComponentLayout } from './shared.component-layout';

export abstract class PageComponentBase {
    @ViewChild('layout') protected layout: SharedComponentLayout;
}

login.component.ts - 헤더 없음

import { Component } from '@angular/core';
import { PageComponentBase } from './page.component-base';

@Component({
  selector: 'login-component',
  template: `
  <shared-component-layout #layout>
    <div class="layout-body">
      LOGIN BODY
    </div>
  </shared-component-layout>
  `
})
export class LoginComponent extends PageComponentBase {

  ngOnInit() {
    this.layout.hideLayoutHeader = true;    
  }
}

home.component.ts - 머리글 포함

import { Component } from '@angular/core';
import { PageComponentBase } from './page.component-base';

@Component({
  selector: 'home-component',
  template: `
  <shared-component-layout #layout>
    <div class="layout-body">
      HOME BODY
    </div>
  </shared-component-layout>
  `
})
export class HomeComponent extends PageComponentBase {

  ngOnInit() {    
    this.layout.layoutHeader = 'Home component header';
  }
}

언급URL : https://stackoverflow.com/questions/46527826/best-method-to-set-different-layout-for-different-pages-in-angular-4

반응형

'programing' 카테고리의 다른 글

exec("mysqdump")에서 2를 반환하지만 명령줄에서 명령이 작동합니다.  (0) 2023.08.25
express.js를 사용하여 Ajax 호출에서 CSRF 보호를 구현하는 방법(완전한 예 찾기)?  (0) 2023.08.20
전방 엔지니어링 EERD의 Workbench 8.0 오류 코드 1064  (0) 2023.08.20
node.js에 대한 작업 스케줄러 라이브러리가 있습니까?  (0) 2023.08.20
jQuery.jax의 캐시 옵션이 Firefox와 Chrome에서 작동하지 않습니까?  (0) 2023.08.20

'programing'의 다른글

  • 현재글각도 4에서 페이지마다 다른 레이아웃을 설정하는 가장 좋은 방법

관련글

댓글

티스토리툴바