如何在router outlet angular 4 路由中替换整个页面？

Question

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

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

详细信息组件结果布局：

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

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

主页组件锚点link 从主页导航到详细信息

<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"]，新的详细信息页面按预期打开，但 parent 主页布局未隐藏。

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

Answer 1

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

const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'details', component: AppDetailsComponent } ] 而在app.component.html中，无需注入<app-home></app-home>。简单地说，我们必须写 <router-outlet></router-outlet>

Answer 2

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

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

<router-outlet></router-outlet>

Answer 3

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

Answer 4

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

应用组件
主页组件
详情组件

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

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

我的路线如下所示：

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

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

如何在router outlet angular 4 路由中替换整个页面？

How to replace entire page in router outlet angular 4 routing?

angular

angular4-router