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

Posted 2023-02-27

技术标签:

【中文标题】如何替换路由器出口角4路由中的整个页面？【英文标题】：How to replace entire page in router outlet angular 4 routing? 【发布时间】：2018-07-07 18:53:16 【问题描述】：

我想在角度 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"] 后，新的详细信息页面按预期打开，但父主页布局并未隐藏。

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

【问题讨论】：

你有解决办法吗？ 【参考方案1】：

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

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

<router-outlet></router-outlet>

【讨论】：

嗨，你能详细说明一下答案吗？如果只使用，那么AppComponent的UI呢？那么可点击的图片在哪里显示呢？ @AnishMittal 你好，Anish。我和你有完全相同的问题。你有解决办法吗？【参考方案2】：

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

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

【讨论】：

你能详细说明一下吗？嗨，在我的例子中，app.component.html 是第一个 UI 屏幕。这里我展示了一个按钮。然后我在这个按钮之后写。因此，在单击按钮时，下一个组件将显示在 app.component.html 中按钮的正下方。我想要的是，点击按钮时，这个按钮应该被隐藏[意味着，app.component.html 的 UI 应该被隐藏]，并且只显示下一个组件。【参考方案3】：

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

【讨论】：

【参考方案4】：

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

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

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

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

我的路线将如下所示：


    path: 'home',
    component: HomeComponent
,

    path: 'details',
    component: DetailsComponent
,

    path: '',
    pathMatch: 'full',
    redirectTo:'/home'
,

    path: '**',
    component: HomeComponent

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

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

以上是关于如何替换路由器出口角4路由中的整个页面？的主要内容，如果未能解决你的问题，请参考以下文章

带有角度路由器出口的 flex 布局（flexbox）

角4+：手动重定向路由

中小型企业出口路由配置实例-链路负载均衡

无法匹配任何路由。 URL 段：同时使用多个路由器出口

为延迟加载或子模块使用命名路由器出口

js去除运营商或者路由器添加的广告脚本