如何更换路由器出口角度4路由中的整个页面？

Question

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

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

详细信息组件结果布局：

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

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

主页组件锚点链接，可以从主页导航到详细信息

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

点击[routerLink =＆＃34; / details＆＃34;]后，新的详细信息页面按预期打开，但父家庭布局未被隐藏。

有人可以建议我的路由中是否有任何问题？

Answer 1

也许父家庭布局来自 ＆LT; APP-家＆GT;您在上面给出的组件＆lt; router-outlet＆gt;，

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

<router-outlet></router-outlet>

Answer 2

这种情况正在发生，因为你建立了亲子关系。 如果要替换整个页面，请将其作为兄弟关系。

Answer 3

您必须在{ path: '', component: HomeComponent }的开头而不是app-routing.module添加'home'，空字符串将加载后的应用程序直接定向到homeComponent