Почему Angular 2 визуализирует шаблон компонента приложения дважды

Question

Я хочу отображать общий колонтитул в приложении. Но когда я пытаюсь это сделать, он отображается дважды:

app.component.html

<header>
    Header
</header>
<router-outlet></router-outlet>
<footer>
    Footer
</footer>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.module.ts

RouterModule.forRoot([
  {path: 'home', component: AppComponent},
  {path: '*', redirectTo: 'home', pathMatch: 'full'},
  {path: '**', redirectTo: 'home', pathMatch: 'full'}
])

Результат

Header
Header
Footer
Footer

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

Answer 1

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

Создайте настоящий, другой домашний компонент. Не используйте корневой компонент для своей домашней страницы.

Answer 2

Следующее произошло со мной в контексте преобразования компонентов Angular в веб-компоненты (если вы или другие читатели можете почувствовать себя идентифицированными этим конкретным вариантом использования):

Другая причина, по которой Angular Component визуализируется дважды, заключается в том, что вы, возможно, регистрируете компонент как веб-компонент (используя@angular/elements package), и в то же время вы используете тот же компонент, что и компонент angular.

Например, если у вас есть угловой компонент (например, <simple-title>), который вы используете внутри другого углового компонента (например, <complex-title>), и вы также зарегистрировали первый компонент как веб-компонент (например, createCustomElement(<simple-title>)), то вторая составляющая (<complex-title>) может принять версию angular и версию компонента веб-компонента как действительные, а затем выполнить рендеринг дважды.

Решение (в моем случае) заключалось в создании другого углового компонента, который можно было бы повторно использовать обоими компонентами (например, <title-renderer> что используется <simple-title> а также <complex-title>).