Question

我想要做的是，我想同时加载home component和sidebar component。

const appRoutes: Routes = [
  {
    path: '', component: HomeComponent, children: [{
      path: 'sidebar', component: SidebarComponent, children: [
        { path: 'about', component: AboutComponent },
        { path: 'clients', component: ClientsComponent },
        { path: 'services', component: ServicesComponent },
        { path: 'contact', component: ContactComponent },
        { path: 'datatable', component: DataComponent }
      ]
    }]
  }

Answer 1

您可以使用指定的出口：

const appRoutes: Routes = [
  {
    path: '', component: HomeComponent, children: [

        { path: 'about', component: AboutComponent },
        { path: 'clients', component: ClientsComponent },
        { path: 'services', component: ServicesComponent },
        { path: 'contact', component: ContactComponent },
        { path: 'datatable', component: DataComponent }
      ]
  },
  { path: '', component: SidebarComponent, outlet:'secondary' }
]

HTML：

<router-outlet></router-outlet> //primary outlet
<router-outlet name="secondary"></router-outlet>  //secondary outlet

Answer 2

为什么不让HomeComponent成为父组件而SideBarComponent位于HomeComponent的模板中？

Answer 3

我同意迈克的回答。如果您希望侧边栏组件始终显示，则您的主组件应该是侧边栏的父级。您的路由可以大大简化：

  def block.value
    def self.value; @value end
    @value = self.yield
  end

你的app html看起来有点像这样：

const routes: Routes = [{
  path: 'about',
  component: AboutComponent
}, {
  path: 'client',
  component: ClientComponent
}, {
  path: '**',
  redirectTo: 'about'
}]

演示：

https://stackblitz.com/edit/angular-tde6as?file=app%2Fclient%2Fclient.component.css

角度中每个路径的多个组件

3 个答案: