web-dev-qa-db-ja.com

Angular 2がアプリコンポーネントテンプレートを2回レンダリングするのはなぜですか

アプリ全体に共通のヘッダーとフッターを表示したい。しかし、私がそれをやろうとすると、それは2回表示されます：-

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

前回、ヘッダーとフッターのコンポーネントを作成してこの問題を解決しました。同じことをすればうまくいくことはわかっていますが、なぜこれが間違っているのかを理解したいと思います。

angularangular-componentsrouter-outlet
12
Stacy J

Appコンポーネントは、アプリケーションのルートコンポーネントであり、常に存在し、このルートコンポーネント内で、ルーターのアウトレットによって「ホーム」パスに表示されるコンポーネントでもあるためです。つまり、ルーターがアプリコンポーネント内にアプリコンポーネントを表示するということです。

実際の異なるホームコンポーネントを作成します。ホームページのルートコンポーネントを再利用しないでください。

22
JB Nizet

AngularコンポーネントをWebコンポーネントに変換するコンテキストで、次のことが起こりました（あなたまたは他の読者がこの特定のユースケースによって識別されていると感じる場合）：

Angularコンポーネントが2回レンダリングされるもう1つの理由は、コンポーネントをWebコンポーネント（_@angular/elements_パッケージを使用）として登録している可能性があるためです。時間、あなたはangularコンポーネントと同じコンポーネントを使用しています。

たとえば、別のangularコンポーネント（例：_<simple-title>_）内で使用しているangularコンポーネント（例：_<complex-title>_）がある場合）、最初のコンポーネントをWebコンポーネント（例：createCustomElement(<simple-title>)）として登録した場合、2番目のコンポーネント（_<complex-title>_）はangular version and theコンポーネントのWebコンポーネントバージョンが有効であるため、2回レンダリングします。

解決策（私の場合）は、両方のコンポーネントで再利用できる別のangularコンポーネント（例：_<title-renderer>_と_<simple-title>_で使用される_<complex-title>_）を作成することでした）。

0
futbolsalas15