Angular 6嵌套模板视图

Question

我是Angular的新手（我正在使用Angular 6），我想在布局视图中定义一些“插入内容块”。

例如：

<!-- layout.component.html -->
<div>{{my.title.component}}</div>
<div>{{my.body.component}}</div>

然后，我希望能够执行以下操作：

<!-- title.component.html -->
<h1>I am the title</h1>

对于身体：

<!-- body.component.html -->
<p> I am a very complex component inserted up there </p>

然后，我想创建如下内容：

<!-- assembled.component.ts -->
@MagicalDecorator({
   layout: LayoutComponent,
   use_as_title_component: TitleComponent,
   use_as_body_component: BodyComponent,
}

我可以做这样的事吗？我可能使用了错误的方法，但这就是我想象的那样。如果有更好的方法，我也想知道。

编辑： 我的想法是我希望能够使用布局组件添加格式（例如，将它们放在引导面板中），而不必为要使用相同布局的每个组件组合重复相同的格式

Answer 1

你看过路由吗？

路由允许您定义标准布局容器，然后仅替换该容器内部的内容。

例如，您可以定义一个“ app”容器（通过路由器出口定义），该容器定义整个页面。

您可以定义一个“外壳”容器，只需更改路线即可替换其中显示的组件。

这是我的意思的图片：

这是另一个屏幕截图。这个有三个子路由器出口。最里面的路由器出口用于显示特定选定选项卡的内容。