动态插入表单组件

Question

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

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

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

Answer 1

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

我希望这会有所帮助

Answer 2

  

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

您可以使用router-outlet

1. 您将每个区域（页眉，正文和页脚）定义为router-outlet，您可以指定您的根模板，如下所示。请注意，我们专门将name属性设置为header和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-outlet名称属性

   匹配

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

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