动态插入表单组件答案

【问题标题】：Insert form-component dynamically动态插入表单组件
【发布时间】：2017-03-27 04:03:42
【问题描述】：

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

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

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

【问题讨论】：

标签： angular angular2-router3

【解决方案1】：

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

希望对你有帮助

【讨论】：

【解决方案2】：

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

你可以使用router-outlet

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

您在路由器配置中指定将在 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 了解更多信息。

【讨论】：

感谢您的回答。我已经有了这个设置，但要与您交流，您需要额外的服务。我希望有一个更好的解决方案，没有插座。子项仅使用输入组件进行转储。父级应具有保存按钮和有效控件。