The "Hello" text is coming on every page because you put it after router-outlet tag.
So all the components are being loaded in <router-outlet></router-outlet>
& then "Hello" text is shown after each component.
If you want this text should only on the Home component put this in the respective component template file.
app.component.html
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Home</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
</nav>
<router-outlet></router-outlet>
crisis-center-home.component.html
<p>Welcome to the Crisis Center</p>
<div style='font-size: 50px'>{{title}}</div>
crisis-center.component.ts
export class CrisisCenterComponent {
title = 'Hello';
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…