Ako nahradiť celú stránku v smere rohu 4 routing? - uhlový, uhlový4-smerovač

Chcem nahradiť celý obsah stránky na obrázku kliknutím v uhlom 4. Mám 2 komponenty HTML, chcete presmerovať z jednej zložky na inú. Obe komponenty majú odlišnú hlavičku a obsah.

Nájdite SS oboch rozložení: Domov Komponent Výsledok Rozloženie:

Podrobnosti Komponent Výsledok Rozloženie:

Chcem presmerovať z domova na detaily kliknutím na odkaz domov. Výsledkom je, že po kliknutí na prepojenie Home Component sa objaví zložka podrobností a domáci komponent by mal byť skrytý.

Nájdite moje smerovanie 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 kód

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

Kotevný odkaz pre domácu komponentu pre navigáciu z domova do detailov

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

Po kliknutí na tlačidlo [routerLink = "/ details"] sa nová stránka s podrobnosťami otvára tak, ako sa očakávalo, ale rodičovské rozloženie domova sa nezakrýva.

Môže niekto navrhnúť akýkoľvek problém v mojom smerovaní?

odpovede:

Možno, že rodičovská domáca dispozícia prichádza <app-home> komponent, ktorý ste zadali vyššie <router-outlet>,

Ak chcete nahradiť celú stránku vo vašom app.component.html použite len nasledujúci prvok:

<router-outlet></router-outlet>

K tomu dochádza, pretože ste robil vzťah rodič-deti. Ak chcete nahradiť celú stránku, urobte to ako súrodenský vzťah.