angular - 动态插入表单组件

Question

我想动态插入一个包含 html 和 formgroup 定义的表单模块/组件。页眉/页脚/按钮（白色）始终相同。是否可以启动表单父级（白色）。

<parent-form dynform="dynamicform"></parent-form>

父/动态应该能够相互通信，父控制。

Answer 1

页眉/页脚/按钮（白色）始终相同

你可以使用router-outlet

1. 您将每个区域（页眉、正文和页脚）定义为router-outlet，您可以指定您的根模板，如下所示。请注意，我们专门将name属性设置为headerand footer，并保持主区域不变。

   <router-outlet name='header'></router-outlet>
   <router-outlet></router-outlet>
   <router-outlet name='footer'></router-outlet>
   

2. router-outlet您指定将在路由器配置上呈现哪些组件。请注意，它HeaderComponent具有header. outlet你可以猜到，outlet应该匹配router-outletname 属性

   { 
     path: 'pageA', 
     children : [
        {path:'', component: MainBodyComponent},
        {path:'', component: HeaderComponent, outlet:'header'},
        {path:'', component: FooterComponent, outlet:'footer'}
     ] 
   }
   

有关更多信息，请参阅此Plunker。

Answer 2

如果我理解正确这一点，那么您正在寻找的正是 Angular2 路由器所提供的。检查官方文档中的路由（例如https://angular.io/docs/ts/latest/guide/router.html或https://angular.io/docs/ts/latest/tutorial/toh-pt5.html）。

我希望这有帮助