Angular 2中的目标同级元素

我在一个模板中有多个按钮标签，需要针对下面的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>

列表项
列表项


列表项
列表项

创建这样的对象

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

<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']"

你可以像这样点击显示ul

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

<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']"

---

这取决于您使用函数或直接在模板中执行，如逻辑简单，我更喜欢使用此模板。

您可以使用模板引用变量：

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

显示更多信息

列表项
列表项

显示更多

列表项
列表项

为什么不将其提取到只包含单个按钮和列表的单独组件中，然后使用例如

ViewChild

？然后，您可以添加任意数量的代码，而无需重复或过度复杂代码。感谢您的建议，这有助于解决我当前的问题。：）对于对接，lel+1。