代码之家 › 专栏 › 技术社区 › chuckd

如何在Angular中用自己的路由在父组件内显示特定的子组件?

angular-component-router angular-components angular-routing angular

0

chuckd · 技术社区 · 5 年前

我可以在父组件中轻松显示子组件,但如何根据路线切换子组件的显示?

是否有可能在不使用*ngIf来隐藏和显示子组件的情况下创建这样的路由机制?

我有一个个人资料页面,例如/成员/编辑

当您第一次路由到我要加载并显示子组件的页面时

<app-profile-menu-items>

这样地

<app-parent-component class="container">
  <div class="col-2">
    // general info 
  </div>
  <div class="col-10">
    // child component here
    // only want to show 1 child at a time based on some routing
    <app-profile-menu-items></app-profile-menu-items>
  </div>
</app-parent-component>

此子组件 <app-profile-menu-items>

其中有一个选项(链接)列表可供选择(/member/edit/info、/member/edit/images等),单击时应显示该子组件并隐藏

<应用程序配置文件菜单项> //显示以下内容时隐藏

<app-profile-menu-info></app-profile-menu-info>
<app-profile-menu-images></app-profile-menu-images>
<app-profile-menu-location></app-profile-menu-location>

此外,路由将如何工作,例如路径:“edit/info”,我将为组件使用什么?

{ path: 'edit', component: MemberEditComponent, resolve: {user: MemberEditResolver}, canDeactivate: [PreventUnsavedChangesGuard]},

0 回复 | 直到 5 年前

1

2

Arash Hatami 5 年前

你的父模板应该是这样的,它应该有routerOutlet:

<app-parent-component class="container">
    <div class="col-2">
      // general info 
    </div>
    <div class="col-10">
      // child component here
      // only want to show 1 child at a time based on some routing
      <router-outlet></router-outlet>
    </div>
</app-parent-component>

以及路由模块中的路由:

const routes: Routes = [
{
    path: '',            //<---- parent component declared here
    component: ParentComponent,
    children: [                          
        {
            path:'child-1',
            component: Child1Component  // <-- Child component 
        },
        {
            path:'child-2',
            component: Child2Component  // <-- Child component 
        },
        {
            path:'child-3',
            component: Child3Component // <-- Child component 
        }
    ]
 }
];

2

1

Kavinda Senarathne 5 年前

您可以按如下方式设置路线。

const routes: Routes = [
    {
        path: 'parent-component',            //<---- parent component declared here
        component: ParentComponent,
        children: [                          
            {
                path:'profile-menu-items',
                component: ProfileMenuItemsComponent  // <-- Child component 
            },
            {
                path:'profile-menu-images',
                component: ProfileMenuImagesComponent  // <-- Child component 
            },
            {
                path:'profile-menu-location',
                component: ProfileMenuLocationComponent // <-- Child component 
            }
        ]
     }
  ];