如何在路由器出口的4号角路由中替换整个页面？

Question

我想替换成角度4的图像单击时的整个页面内容。我有2个HTML组件，想要从一个组件重定向到另一个。这两个组件都具有不同的标题和内容。

请找到两种布局的SS： 主组件结果布局：

详细信息组件结果布局：

我想从首页重定向到点击首页链接的详细信息。因此，在单击“主页”组件链接时，应显示详细信息组件，而应隐藏“主页”组件。

请找到我的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代码

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

Home组件锚链接可从主页导航至详细信息

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

在单击[routerLink =“ / details”]时，新的详细信息页面将按预期方式打开，但父级布局不会被隐藏。

谁能建议我的路由中是否存在任何问题？

Answer 1

父级主页布局可能来自<route-outlet>上方给出的<app-home>组件，

要替换整个页面，请在app.component.html中仅使用以下元素：

<router-outlet></router-outlet>

Answer 2

这是因为您建立了亲子关系。如果要替换整个页面，请使其成为同级关系。