如何创建html5的详细信息标签答案

【问题标题】：How to create details tag of html5如何创建html5的详细信息标签
【发布时间】：2019-07-25 21:26:03
【问题描述】：

我们需要在 Angular 7 中使用 html、css、javascript 创建我自己的详细信息，例如 html5 标签。怎么做？

<details>
  <summary>Copyright 1999-2018.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

这样做的另一种方式。请帮忙！

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： javascript html css angular

【解决方案1】：

使用document.createElement。

const details = document.createElement('details');
const p1 = document.createElement('p');
const p2 = document.createElement('p');

p1.textContent = '- by Refsnes Data. All Rights Reserved.';
p2.textContent = 'All content and graphics on this web site are the property of the company Refsnes Data.';

details.appendChild(p1);
details.appendChild(p2);
document.body.appendChild(details);

【讨论】：

我不喜欢这样，我们在这里谈论的是角度问题，而您正在抛出所有这些低级元素的创建和附加，我认为这既没有必要也不可行。
我不喜欢这样，我们在这里谈论的是角度问题，而您正在抛出所有这些低级元素的创建和附加，我认为这既没有必要也不可行。

【解决方案2】：

您可以在点击事件上使用切换方法来显示和隐藏详细信息内容。此链接是 Angular 7 示例，如您的 html 详细信息：

https://stackblitz.com/edit/angular-avnuk6?file=src/app/app.component.html

<div *ngFor="let event of events;" class="event-list">

    <section class="event-item" (click)="event.toggle=!event.toggle">
        <div class="event-summary">
            <summary class="event-name">{{ event.name }} </summary>
        </div>
    </section>

    <!-- WANT TO SHOW THIS WHEN ABOVE SECTION ELEMENT IS CLICKED -->
    <section class="event-details" *ngIf="event.toggle">
    <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
    </section>
    <!-- END SECTION -->

</div>

【讨论】：

【解决方案3】：

当您使用 Angular cli 创建组件时，您将调用它的名称将是您的标签的名称，但它会显示为“app-detail”。要更改这一点，您可以在语音“选择器”的组件装饰器中随意更改它

【讨论】：