typescript - 当前组件后的angular 2附加指令

Question

假设我有以下示例组件(注意 my-app 不是在 index.html 中使用的应用程序定义组件)

@Component({
    selector: 'my-app',
    directives: [NavbarComponent, SidebarComponent],
    template: `
      <my-navbar></my-navbar>
      <router-outlet></router-outlet>
      <my-sidebar></my-sidebar> <!-- Append this after <my-app></my-app> -->
    `
})

我希望能够并使用 <my-sidebar>组件并向其添加信息，但是我想在 <my-app> 之后显示它而不是在里面。这在 Angular 2 中完全可能吗？

Answer 1

正常创建侧边栏组件

@Component({
  selector: 'my-sidebar',
  template: 'Sidebar'
})
class SidebarComponent{}

然后在你的AppComponent你可以使用 DynamicComponentLoader注入(inject) SidebarComponent在 AppComponent 旁边

@Component({
  selector: 'my-app',
  directives: [NavbarComponent, ROUTER_DIRECTIVES],
  template: `
    <my-navbar></my-navbar>
    <router-outlet></router-outlet>
})
class AppComponent {
    constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {
        dcl.loadNextToLocation(SidebarComponent, elementRef);
    }
}

最终结果会是

<my-app>
  <my-navbar></my-navbar>
  <router-outlet></router-outlet>
</my-app>
<my-sidebar>Sidebar</my-sidebar>