Angular 具有多个 templates/HTML 文件的组件

Question

编辑：对于后来遇到这个问题的任何人，我最终使用路由器插座解决了这个问题。 I found this YouTube tutorial pretty helpful.

我有一个包含动态内容的组件 Contents (<app-contents></app-contents)，很像博客具有相同的基本布局，但每个页面的 text/images/links/HTML 的不同组合或post.

<div class="wrapper">
  <app-contents></app-contents>
</div>

与其生成一堆不同的组件，我觉得这个 Contents 组件可能只使用不同的 HTML 文件或不同的模板。理想情况下，我可以将模板分成它们自己的 HTML 文件。 Contents 组件结构可能是这样的：

- contents
    - contents.component.css // <--- referenced by all contents templates
    - contents.component.html // <--- default template
    - lesson1.contents.component.html
    - lesson2.contents.component.html
    - lesson3.contents.component.html
    - lesson4.contents.component.html
    - lesson5.contents.component.html
    - contents.component.ts
    - contents.component.spec.ts

我希望 <app-contents></app-contents> 包含一个带有一系列链接的默认模板。类似于：

<ol>
  <li><a [routerLink]="['/lessons', 'lesson-1']">Lesson 1</a></li>
  <li><a [routerLink]="['/lessons', 'lesson-2']">Lesson 2</a></li>
  <li><a [routerLink]="['/lessons', 'lesson-3']">Lesson 3</a></li>
  <li><a [routerLink]="['/lessons', 'lesson-4']">Lesson 4</a></li>
  <li><a [routerLink]="['/lessons', 'lesson-5']">Lesson 5</a></li>
</ol>

然后，在app.module.ts中，我会像这样使用路由参数设置路由：

const appRoutes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full'},
  { path: 'lessons/:lesson', component: ContentsComponent},
];

此时，我有点不知所措。 1) 是否有更好的方法来加载这些基本上共享组件信息（如样式等）的不同模板，而不是上述在组件中包含多个 HTML 文件的方法？，和 2) 我应该从这里到哪里才能将此路径路由到正确的模板？ 我已经查看了 ngIf/ngSwitch 的文档、ng-template 以及许多其他可能的解决方案，但我无法将它们连接到这个特定场景。

Answer 1

您可以使用内容投影来实现这一点，这基本上可以让您将 html 代码传递给在其中呈现的组件。虽然没有很好的官方 angular 文档（至少我不知道），this post 详细解释一下

Angular 具有多个 templates/HTML 文件的组件

Angular Component with multiple templates/HTML files

javascript

angular

angular-ui-router