元素根据其在特定组件中的存在情况呈现元素。

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>

我在home组件和admin组件中呈现这个HTML，但是我只想显示这个删除按钮

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

在管理页面上。在主页上删除应该是不可见的。我认为在一些解决方案，但他们似乎没有一个好，它将有重复的代码。

有人能提出解决办法吗？

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。