在Angular中,可以使用路由来实现子路径在嵌套路径中占满一页的效果。以下是实现该效果的步骤:
ng generate component parent
ng generate component child
<router-outlet></router-outlet>
标签来显示子组件的内容。这将允许子组件在父组件中占据一个页面。<!-- parent.component.html -->
<div>
<h1>父组件</h1>
<router-outlet></router-outlet>
</div>
app-routing.module.ts
文件中进行配置。// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParentComponent } from './parent/parent.component';
import { ChildComponent } from './child/child.component';
const routes: Routes = [
{ path: 'parent', component: ParentComponent, children: [
{ path: 'child', component: ChildComponent }
]}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
imports
数组中。// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当你访问/parent
路径时,父组件将显示,并且子组件将占据整个页面。当你访问/parent/child
路径时,父组件仍然显示,但子组件将替换父组件中的内容,并且仍然占据整个页面。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云