离子角度嵌套离子路由器出口渲染为页面而不是子组件
提问于 2020-02-27 23:52:41
我使用了一个嵌套的离子路由器出口，以便将路由呈现为一个子组件，而不是整个页面。
这是我当前的路由配置：
// app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './login/login.module#LoginModule' },
{ path: 'register', loadChildren: './register/register.module#RegisterModule' },
{
path: 'dashboard',
component: Dashboard,
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
children: [
{ path: 'submit', loadChildren: './submission/submission.module#SubmissionModule' }
]
}
];我当前在仪表板组件中的仪表板模板：
<!-- dashboard.html-->
<h2 id="dashboard-header">Dashboard</h2>
<ion-router-outlet></ion-router-outlet>当我转到/dashboard/submit时，提交组件占据了整个页面，覆盖了仪表板标题。查看ion-router-outlet和outlet组件的样式，我看到了以下内容：
.ion-page {
left: 0;
right: 0;
top: 0;
bottom: 0;
display: -webkit-box;
display: flex;
position: absolute;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
contain: layout size style;
overflow: hidden;
z-index: 0;
}如何删除离子路由器出口的此样式？它是从哪里来的？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-28 08:03:09
正如您在这里看到的，您的提交页面正在作为子组件加载。
你必须在布局上下功夫。Angular路由器逻辑工作正常。
尝试在dashboard.html中添加以下代码，您就可以理解组件和子组件是如何工作的：
<ion-row>
<ion-col size="6">
<ion-item>
<ion-label>DASHBOAD COMPONENT</ion-label>
</ion-item>
</ion-col>
<ion-col size="6">
<ion-router-outlet></ion-router-outlet>
</ion-col>
</ion-row>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60443417
复制
腾讯云开发者
