要在Angular中实现子路由元素在router-outlet之外，可以使用命名router-outlet和auxiliary routes。 下面是一个示例，演示了如何将子路由元素放在router-outlet之外：

app.component.html文件：

  
Main Component
  

main.component.html文件：

Main Component

sidebar.component.html文件：

Sidebar Component

app.module.ts文件：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { MainComponent } from './main.component';
import { SidebarComponent } from './sidebar.component';

const routes: Routes = [
  { path: '', redirectTo: '/main', pathMatch: 'full' },
  { path: 'main', component: MainComponent },
  { path: 'sidebar', outlet: 'sidebar', component: SidebarComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppModule { }

在这个示例中，app.component.html是应用程序的主要布局，包含一个和一个导航链接。main.component.html是主组件的模板，它包含一个嵌套的，用于加载子路由元素。sidebar.component.html是侧边栏组件的模板。

在app.module.ts中，我们定义了路由配置。{ path: 'sidebar', outlet: 'sidebar', component: SidebarComponent }将SidebarComponent定义为辅助路由，并将其命名为sidebar。然后在app.component.html中，我们使用来加载辅助路由。

这样就可以实现子路由元素在router-outlet之外的效果。