Question

我在模板中有多个按钮标记，需要定位下面的 ul 兄弟，以便在点击时应用样式更改。如何在组件的 showMore（）中定位ul？

        <button (click)="showMore()" class="show-more-btn"></button>
        <ul class="list-content">
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <button (click)="showMore()" class="show-more-btn"></button>
        <ul class="list-content">
            <li>List Item</li>
            <li>List Item</li>
        </ul>

Answer 1

您可以使用模板参考变量：

<button #butt1 (click)="butt1.showMore = !butt1.showMore;" class="show-more-btn">Show more</button>
<ul class="list-content" *ngIf="butt1.showMore">
    <li>List Item</li>
    <li>List Item</li>
</ul>

<button #butt2 (click)="butt2.showMore = !butt2.showMore;" class="show-more-btn">Show more</button>
<ul class="list-content" *ngIf="butt2.showMore">
    <li>List Item</li>
    <li>List Item</li>
</ul>

Answer 2

创建一个像这样的对象

uls = {
 ul1: false,
 ul2: false
};

你可以点击这样显示ul

<button (click)="uls['ul1'] = true" class="show-more-btn"></button>
 <ul class="list-content" *ngIf="uls['ul1']">
   <li>List Item</li>
   <li>List Item</li>
 </ul>
 <button (click)="uls['ul2'] = true" class="show-more-btn"></button>
  <ul class="list-content" *ngIf="uls['ul2']">
   <li>List Item</li>
   <li>List Item</li>
  </ul>

您也可以像这样切换

(click)="uls['ul1'] = !uls['ul1']"

这取决于你是用功能做的，还是直接用模板做的，如果逻辑很简单，我会更喜欢这个。

Angular 2中的目标兄弟元素

2 个答案: