Angular 4 - Как прокладывать маршрут между страницами с разным макетом (верхний и нижний колонтитулы)?

Question

Я новичок в Angular 2 +.

Мой проект состоит из целевых страниц, называемых страницами Home и About, которые имеют верхний и нижний колонтитулы, связанные с целевыми страницами.Там есть кнопка входа в систему и после кнопки входа в систему меняются верхний и нижний колонтитулы для панели инструментов (меню скрытое изменение цвета и т. Д.).

В настоящее время я настроил маршрутизацию в своем проекте в app.module.ts следующим образом:

    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: 'login', component: LoginComponent},
    { path: 'dashboard', component: DashboardComponent},

Теперь маршрутизация работает нормально, и верхний и нижний колонтитулы загружаются нормально, но когда я перехожу к localhost / dashboard, там также появляются верхний и нижний колонтитулы целевых страниц, что очевидно так как я поместил их в свой файл app.component.html как

<header-nav></header-nav>
<router-outlet></router-outlet>
<footer></footer>

Вопрос: Чего я хочу достичь, так это когда «/ dashboard» загружается в url верхний и нижний колонтитулы из приложенияФайл .component.html не загружается, и загружаются его собственный верхний и нижний колонтитулы из другого файла component.html.

Подход 1. Я могу добавить верхний и нижний колонтитулы к каждой html-странице каждого компонентаи только маршрутизатор на app.component.html, поэтому на каждой странице будут загружаться соответствующие элементы.

Я ищу лучший подход, когда / dashboard загружается из diffфайл erent component.html и я легко могу создать целевые страницы app.component.html как

<header-nav></header-nav>
<router-outlet></router-outlet>
<footer></footer>

и dashboard.component.html как

<dashboard-header></dashboard-header>
<router-outlet></router-outlet>
<footer></footer>

Answer 1

Удалите ваш <header-nav></header-nav> в app.component.html и поместите каждый файл component.html туда, где вы хотите.То же самое для <dashboard-header></dashboard-header>, где вы хотите, чтобы он поместил непосредственно этот component.html.

Answer 2

Создание LandingComponent и DashboardComponent.Компонент Landing тогда может иметь свои собственные дочерние маршруты, для которых требуется схема посадки, и то же самое относится и к панели мониторинга.

маршрутизация

const routes: Routes = [
  {
    path: '',
    component: LandingComponent,
    children: [
      {
        path: 'features',
        component: FeaturesComponent
      }
    ]
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'analytics',
        component: AnalyticsComponent
      }
    ]
  }
];

landing.component.html

<landing-header></landing-header>
<router-outlet></router-outlet>
<landing-footer></landing-footer>

dashboard.component.html

<dashboard-header></dashboard-header>
<router-outlet></router-outlet>
<dashboard-footer></dashboard-footer>

app.component.html

<router-outlet>

Answer 3

Вы можете использовать * ngIf, чтобы показать и скрыть элементы по маршруту.Поэтому, если вам нужно показывать заголовок только на определенных маршрутах, это лучший вариант.

Пример:

*ngIf="router.url === '/some/route'"