在Angular 2+中拆分组件HTML？

Question

I have an Angular 5 app with lot of complex forms and layouts. I would like to split the component HTML into several files and use a single tag to represent them. Is it possible to create a directive to replace a tag with a file's contents?

Is there a better way of handling long HTML files with templates for loading, loaded and error states?

Imagine a feed.component.html has different templates for different types of feed items (images / links / videos / text / etc.) governed by an ngIf . What is the ideal way of maintaining this file?

Answer 1

Angular best practice talks about one html (and one ts file) per component.

If your html in very long and becomes unreadable, probably your logic has the potencial to become too heavy as well .

I would consider dividing the component into sub-components, eg:

feed
  ├─ feed.component.html
  ├─ feed.component.scss
  ├─ feed.component.spec.ts
  ├─ feed.component.ts
  └ feeds
     ├─ image
     │   ├─ image.component.html
     │   :
     │   :
     ├─ link
     │   ├─ link.component.html
     │   :
     │   :

Answer 2

Could you make a separate component for each feed item? I think that might make it easier to read and understand.

Depending on what your doing, you might even be able to generate these components dynamically instead of using if blocks.