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

Question

我们需要在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> 

替代方法。 请帮忙！

Answer 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); 

Answer 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>

Answer 3

当您创建带有角度cli的组件时，您将称之为的名称将是标签的名称，但将显示为“ app-detail”。 要更改此设置，请在语音“选择器”的组件装饰器中随意更改