повторно использовать тот же HTML (с параметрами) в компонентах для ионного оповещения - PullRequest
Новая
       31

повторно использовать тот же HTML (с параметрами) в компонентах для ионного оповещения

0 голосов
/ 09 апреля 2019

Привет. Я немного запутался в том, как это сделать. Я знаю, что вы можете создавать многократно используемые шаблоны, а затем использовать их в нескольких компонентах, обычно они используются непосредственно в 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>

И я не уверен, как вызвать это в моем сообщении о предупреждении, сообщении: 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?

...