Блог

Я использую компоненты Material design для своего приложения Angular. Для нескольких частей моего приложения я открываю диалоговое окно / modal, которое охватывает весь видовой экран, и я хочу вложить компоненты в этот модальный.

Например, вот код для открытия диалогового окна / модального:

   openUserAccountModal(): void {
   const dialogRef = this.dialog.open(MyAccountModalComponent, {
    width: '100vw',
    height:  '100vh',
    maxWidth: '100vw',
    maxHeight: '100vh',
    hasBackdrop: false
  });

   dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
}
  

Когда открывается это диалоговое окно / modal, у меня есть два основных раздела, боковое навигационное меню с разными названиями разделов и содержимое, которое я хочу отобразить для каждого раздела. Я использую [ngSwitch] для отображения разных разделов. Вот фрагмент кода того, что у меня есть сейчас:

  <div *ngSwitchCase="'My Profile'">
            <div class="my-profile">
                <h4 class="my-profile__section-title">My Profile</h4>
                <p class="my-profile__section-description">Add details about your education, industry 
                   of interest,
                    etc.
                </p>
                <mat-card class="my-profile__user-card u-no-shadow">
                    <div class="edit-btn__wrapper">
                        <button *ngIf="!editMode" mat-flat-button color="primary" class="edit-btn"
                            (click)="editUserData()">Edit</button>
                    </div>
                    <div *ngIf="editMode" class="edit-form">
                        <form action="" class="edit-form__image">
                            <mat-list class="edit-form__list">
                                <mat-list-item class="my-profile__user-list--item image-item">
                                    <img class="my-profile__user-list--image" matListAvatar 
                                 [src]="userData.image"
                                        alt="...">
                                </mat-list-item>
                            </mat-list>
                        </form>
  

Теперь к вопросу: я хочу организовать каждый раздел в отдельный компонент, однако компонент не будет отображаться, когда я это сделаю. Это фрагмент кода того, что я хочу:

 <div *ngSwitchCase="'My Profile'">
   <app-my-profile></app-my-profile>
  

Тем не менее, этот код не будет отображать компонент. Я предполагаю, что это связано с тем, что он отображается в диалоговом окне / модальном. Есть идеи о том, как я могу достичь этой цели?