时间戳

首页 > 解决方案 > 你会如何在 Angular 6 中设计这个组件？

javascript - 你会如何在 Angular 6 中设计这个组件？

问题描述

我有一个关于正确组件设计的相当基本的问题。

我创建了一个基本的手风琴组件，我用它来显示标题和描述。如果单击标题，则显示或隐藏（切换）说明。

@Input() title: String;
@Input() description: String;

目前我将模板中的标题和描述作为道具传递。

<div *ngFor="let project of individualProjects">
  <app-accordion-item 
    [title]="project.title" 
    [description]="project.description"
    [chips]="project.tags">
  </app-accordion-item>
</div>

手风琴模板

<div class="accordion-description" *ngIf="opened">
  {{ description }}
</div>

使用这种结构，渲染一个没有任何列表项或新行的简单段落不是问题。

但是，假设 individualProjects 数组的一项如下：

{
  title: "Project title",
  description: `
  The overall project involved the following:

    Project detail 1
    Project detail 2
    Project detail 3
  ..

  Some more text about project`,
  tags: ["tag"]
},
...

Some more text here

我希望能够将“项目详细信息 x”项目呈现为列表元素，这表明我在这里需要不同的结构。我意识到我可能会遇到与此问题有关的许多不同情况，这需要我更新此结构。

这是使用ng-content的合理点吗？否则，你会建议我如何处理这个问题？

谢谢

标签： javascriptangularcomponentsfrontendcomponent-design

解决方案

推荐阅读