Question

问候我对如何执行此操作感到有些困惑，我知道您可以创建可重复使用的模板，然后在多个组件中使用它，通常将这些组件直接用于html之类的<app-header>。

但是，我有一个离子警报，其中包含必须包含离子图标和特定样式的消息。

" async presentAlertConfirm() {
    const alert = await this.alertController.create({
      header: 'Confirm!',
      message: '<div class="container-alert" ><ion-icon name="close" class="custom-icon-notfound"></ion-icon><div>' + "Registration " + data.statusText + '</div></div>'',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Okay',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
  }"

我想重新利用此消息的内容，因此我将使用一个单独的html组件，如下所示：

<div class="container-alert" *ngIf="typeToShow === 'confirm'">
  <ion-icon name="checkmark" class="custom-icon-confirmed"></ion-icon>
  <div>' + data + '</div>
</div>

<div class="container-alert" *ngIf="typeToShow === 'error'">
  <ion-icon name="close" class="custom-icon-notfound"></ion-icon>
  <div> Registration {{data.statusText}}  </div>
</div>

我不确定如何在我的消息警报消息message.this.popupComponent上调用此函数（但不确定如何在此处继续调用它的html，我还需要发送typeToShow和数据）

我尝试过这个：

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.scss'],
})
export class PopupComponent implements OnInit {

  @Input() public data: String;

  @Input() preferedShowModeKey : String;

  constructor() { }

但是我不确定如何继续进行操作，是否需要查看任何特定的教程或文档？还是我想念的东西？您如何以编程方式执行此操作，一个接收参数的html，然后使用ngIf并显示正确的html内容？

重新利用组件中相同的html（带有参数）来发出离子警报

0 个答案: