Angular 根据元素在特定组件中的存在情况渲染元素

我有一个可重用组件：

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

我们的观众评论


{{r.movie}


{{r.review}


作者{r.author}
删除

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

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

删除

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

有人能提出解决办法吗

试试看：

在可重用组件中，执行以下操作：

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

@Input（）showDeleteButton:布尔值；
....
//HTML
删除

在

home

组件中，为

showDeleteButton

发送false，在

admin

组件中，为

showDeleteButton

发送true