Angular 6 嵌套模板 View

Question

我是 Angular 的新手(我正在使用 Angular 6)，我想在我的布局 View 中定义一些“插入内容 block ”。

例如:

<!-- 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”容器(使用路由器导出定义)。

您可以定义一个“外壳”容器，并通过简单地更改路由来替换显示在其中的组件。

这是我的意思的图片:

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