根据元素在特定组件中的存在来渲染元素

Question

我有这个可重复使用的组件：

      <h4>Our viewers reviews</h4>

      <ul class="list-group" style="color:black" >
        <div *ngIf="userReviews">
        <li class="list-group-item" *ngFor="let r of userReviews;let i=index">
         <p  class="font-weight-bold text-left">{{r.movie}}</p>
          <div class="img-wrapper">
          <img class="img-fluid" src="{{ r.poster }}" alt="{{ r.poster }}" />
        </div>
          <br>
          <p  class="font-weight-bold text-left"> {{r.review}}</p>
          <br>
          <span  class=" font-weight-bold text-left">by </span><span  class="font-italic">{{r.author}} </span>

          <button  style="float:right" (click)="delete()"  class="btn btn-danger">Delete</button>
        </li>
      </ul>
    </div>

我在主页组件和管理组件中渲染这个 HTML 但我只想显示这个删除按钮

<button style="float:right" (click)="delete()" class="btn btn-danger">Delete</button>

在管理页面上。在主页上删除应该是不可见的。我认为在某些解决方案中，但其中 none 看起来不错，并且会有重复的代码。

有人可以提出解决方案吗？

Answer 1

尝试：

在可重用组件中，执行：

@Input() showDeleteButton: boolean;
....
//HTML
 <button *ngIf="showDeleteButton"  style="float:right" (click)="delete()"  class="btn btn-danger">Delete</button>

并在 home 组件中，为 showDeleteButton 发送 false，在 admin 组件中，为 showDeleteButton 发送 true。

根据元素在特定组件中的存在来渲染元素

Render element based on its presence in a specific component

render

angular-ng-if

angular