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

Question

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

请找出两种布局的 SS： 首页组件结果布局：

详细信息组件结果布局：

我想从主页重定向到单击主页链接的详细信息。因此，单击 Home 组件链接时，应该会出现 details 组件，而应该隐藏 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="/details"] 后，新的详细信息页面按预期打开，但父主页布局并未隐藏。

如果我的路由有任何问题，谁能提出建议？

Answer 1

也许父主页布局来自 您在上面给出的 组件 ,

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

<router-outlet></router-outlet>

Answer 2

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

const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'details', component: AppDetailsComponent } ] 而在app.component.html中，不需要注入<app-home></app-home>。只需写<router-outlet></router-outlet>

Answer 3

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

Answer 4

我想用下面的例子来解释。 假设我有 3 个主要组件：

• 应用组件
• 首页组件
• 详细信息组件

主页组件（没有页眉和页脚）包含一个带有“查看详细信息”按钮的项目（名称）。单击按钮后，我们将进入 Details 组件，其中包含有关项目的详细信息（图像、价格、颜色）。

我的应用组件的模板将只包含“”

我的路线将如下所示：

{
    path: 'home',
    component: HomeComponent
},
{
    path: 'details',
    component: DetailsComponent
},
{
    path: '',
    pathMatch: 'full',
    redirectTo:'/home'
},
{
    path: '**',
    component: HomeComponent
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              

有了这个，在运行应用程序时，Home 组件（包含项目的名称和按钮）被渲染或显示。然后，单击按钮（在其上设置路由后）将带我们到 Details 组件（在其自己的视图或页面上）