Como substituir página inteira no roteador de saída angular 4 roteamento? - angular, angular4-roteador

Eu quero substituir todo o conteúdo da página na imagem clique em angular 4. Eu tenho 2 componentes HTML, deseja redirecionar de um componente para outro. Ambos os componentes estão tendo cabeçalho e conteúdo diferentes.

Por favor, encontre as SS de ambos os layouts: Layout do Resultado do Componente Principal:

Detalhes Componente Result Layout:

Eu quero redirecionar de casa para detalhes sobre clique em link para casa. Como resultado, ao clicar no link do componente Início, o componente de detalhes deve aparecer e o componente inicial deve estar oculto.

Por favor, encontre o meu roteamento de app.module.ts

import { ModuleWithProviders }  from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { AuthGuard } from "./auth/auth.guard";
import { AdminComponent }      from "./admin/admin.component";
import { DashboardComponent } from "./dashboard/Dashboard.component";
import { HomeComponent } from "./home/home.component";
import { AppComponent } from "./shell/app.component";
import { AppDetailsComponent } from "./app-details/app.details.component";

const appRoutes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "details",
component: AppDetailsComponent
},
{
path: "",
pathMatch: "full",
redirectTo:"/home"
},
{
path: "**",
component: HomeComponent
}
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

App.component.html code

<app-home></app-home>
<router-outlet></router-outlet>

Link de âncora de componente inicial para navegar de casa até detalhes

<div class="mapContainer" id="MapContainer">
<div class="CustomMapSize">
<a routerLink="/details"><img src="/images/../../../local-npm-packages/assets/images/WorldMap.png" /></a>
</div>
</div>

Ao clicar em [routerLink = "/ details"], a nova página de detalhes é aberta como esperado, mas o layout da página principal não está sendo ocultado.

Alguém pode sugerir se algum problema no meu roteamento?

Respostas:

Talvez o layout da casa dos pais esteja vindo componente <app-home> que você deu acima <router-outlet>,

Para substituir a página inteira, no seu app.component.html use apenas o seguinte elemento:

<router-outlet></router-outlet>

Isso está acontecendo porque você fez um relacionamento entre pais e filhos. Se você quiser substituir a página inteira, faça como relacionamento de irmãos.