角度：如何在单击不同按钮时显示具有不同内容的相同模态？

Question

我有一个相同的打开弹出模式，带有2个不同的按钮，用于添加产品 设置和另一个用于编辑产品设置。在添加产品设置时，应如何隐藏相同模式的按钮，应显示创建按钮，在单击编辑按钮设置按钮时，应显示隐藏创建按钮并显示更新按钮？

<!-- modal footer -->
<div class="modal-footer">
   <button md-raised-button color="primary"   id="CreateProduct" (click)="CreateProductsetting()">Create</button>
   <!--<button md-raised-button color="primary"   id="Editproduct" (click)="EditProductsetting()">Update</button>-->
   <button md-raised-button class="cancel-button"  data-dismiss="modal">Cancel</button>
</div>

我期望具有不同功能的相同弹出模式的输出，一个用于添加产品设置，另一个用于编辑产品设置。

Answer 1

一般的问题似乎是：

  

如何显示或隐藏可重用组件的某些部分？

选项1：* ngIf

ngIf指令根据条件的评估来创建和销毁组件。

<div class="modal-footer">
   <button md-raised-button color="primary" *ngIf="isCreating"   id="CreateProduct" (click)="CreateProductsetting()">Create</button>
   <button md-raised-button color="primary" *ngIf="isEditing"   id="Editproduct" (click)="EditProductsetting()">Update</button>
   <button md-raised-button class="cancel-button"  data-dismiss="modal">Cancel</button>
</div>

在*.component.ts中：

class MyComponent {
  public isEditing: boolean = false;
  public isCreating: boolean = true;
}

每当您要显示/隐藏编辑按钮时，将isEditing和isCreating的值设置为true/false。

选项2：style.display属性绑定

您可以将css属性display设置为none以隐藏元素。

<div class="modal-footer">
   <button md-raised-button color="primary" [style.display]="isCreating ? 'block' : 'none'"   id="CreateProduct" (click)="CreateProductsetting()">Create</button>
   <button md-raised-button color="primary" [style.display]="isEditing ? 'block' : 'none'"   id="Editproduct" (click)="EditProductsetting()">Update</button>
   <button md-raised-button class="cancel-button"  data-dismiss="modal">Cancel</button>
</div>

选项3：使用相同的按钮，但更改标签和回调

您可以根据组件的状态切换单个按钮的标签和操作：

<div class="modal-footer">
   <button md-raised-button color="primary" id="productAction" (click)="(isCreating ? CreateProductsetting : EditProductSetting)()">{{isCreating ? 'Create' : 'Update'}}</button>
   <button md-raised-button class="cancel-button"  data-dismiss="modal">Cancel</button>
</div>