javascript - 为什么/什么时候 ng-content b 会是一个好的实践？

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 5 年前。

Improve this question

也许是一个关于 ng-content/内容投影的奇怪问题。我的想法是，您可以动态地放入“内容”，而“内容”又可以使用 ng-content 进行投影。为了实现此目的，我还可以做的一件事是创建一个输入属性来传递我想要在组件中显示的信息。

我遇到过这个项目； https://trimox.github.io/angular-mdc-web/#/home这是 Angular 的新 Material 组件。我在浏览代码时发现的一件事是，他极端地使用 ng-content 来投影一些“子组件”。我忍不住想知道...为什么？因为我还可以尝试使用一个卡组件和我传递的类似 JSON/对象的配置来解决这个问题。

<mdc-card class="demo-card">
<mdc-card-primary-action mdc-ripple>
    <mdc-card-media class="demo-card__media--16-9" [wide]="true"></mdc-card-media>
    <div class="demo-card__primary">
        <h2 class="demo-card__title" mdcHeadline6>Our Changing Planet</h2>
        <h3 class="demo-card__subtitle" mdcSubtitle2>by Kurt Wagner</h3>
    </div>
    <div class="demo-card__secondary" mdcBody2>
        Visit ten places on our planet that are undergoing the biggest changes today.
    </div>
</mdc-card-primary-action>
<mdc-card-actions>
    <mdc-card-action-buttons>
        <button mdc-button mdcCardAction="button">Read</button>
        <button mdc-button mdcCardAction="button">Bookmark</button>
    </mdc-card-action-buttons>
    <mdc-card-action-icons>
        <button mdcIconButton mdcCardAction="icon" iconOn="favorite" iconOff="favorite_border"></button>
        <mdc-icon mdcCardAction="icon" mdcRipple>share</mdc-icon>
        <mdc-icon mdcCardAction="icon" mdcRipple>more_vert</mdc-icon>
    </mdc-card-action-icons>
</mdc-card-actions>

例如，您可以在上面看到一个“卡片”组件，其中包含多个项目。我还找到了这些组件的来源； https://github.com/trimox/angular-mdc-web/blob/master/packages/card/card.ts .

我原来的问题仍然存在；什么时候使用 ng-content 是一个好的实践，什么时候不是。为什么这是一个好的做法？我还看到 DevExpress 在他们的 devextreme 库中使用它； https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RecordGrouping/Angular/Light/

谢谢

Answer 1

让我简化一下你的问题。假设您想创建一个 card成分。您可以编写自己的子组件(以及执行必要的内容投影的代码)，如下所示:

<card>
   <card-title>My Title</card-title>
   <card-content>
      <p>Content here...</p>
      <card-action>Some button here</card-action>
   </card-content>
   <card-footer>My footer</card-footer>
</card>

...或者您可以创建一个 <card>组件并让它接受这样的配置对象:

config = {
   title: "My title",
   content: {
      innerHTML: "<p>Content here...</p>",
      actions: [ {type: "button", text: "Some button here", onClick: "myFunction()"} ]
   },
   footer: "My footer"
}

那么您为什么要选择第一个选项？

<小时/>

<强>1。语义 HTML

原因之一是，一般来说，将结构 (HTML)、表示 (CSS) 和行为 (JS/TS) 分开是一种很好的做法。自card组件可能会包含其他结构元素，如标题、内容、操作、页脚等。最好在 HTML 中表达此结构，而不是通过 JavaScript/TypeScript 来表达。您应该让 HTML 标记传达内容的基本含义。这样做可以使您的代码更加语义化、干净、可维护且易于阅读。也许如果您只是自己开发一个应用程序(而不是在团队中工作)，那么就不需要使其对其他人具有语义/可读性，因为您了解自己的代码。但您仍然应该使其对 future 的自己可读，因为如果您想在一年后审查您的代码，您可能希望您的代码具有语义且易于阅读。

<强>2。利用 Angular 的模板 synatx

选择第一个选项(使用内容投影+子组件)的另一个原因是您可以利用 Angular 的强大功能，例如数据绑定(bind)和 *ngFor ，在您的 HTML 中。例如，如果您想显示卡片列表，每张卡片都显示社交媒体帖子(例如 Facebook)，您可以轻松编写:

<card *ngFor="let post of posts">
   <card-title>{{post.title}}</card-title>
   <card-content>
      <p>{{post.content}}</p>
      <card-action>
         <card-button (click)="likePost(post)">Like</card-button>
         <card-button (click)="sharePost(post)">Share</card-button>
      </card-action>
   </card-content>
   <card-footer>{{post.footer}}</card-footer>
</card>

而使用 JS/TS 配置对象实现同样的事情可能会更困难。