Блог

Я не уверен, как сформулировать свой вопрос, поэтому было бы лучше, если бы я объяснил функцию, которую я хочу реализовать.

У меня есть компонент диалогового окна материала, который я хочу использовать как общий диалог. Содержимое тела диалогового окна будет зависеть от того, на какую кнопку нажимает пользователь. Например, если пользователь нажмет кнопку «хост-игра», появится диалоговое окно с соответствующим содержимым. Я не хочу реализовывать это с помощью multiple *ngIf , потому что шаблон диалогового окна станет слишком большим по мере добавления дополнительных функций.

Мне было интересно, возможно ли иметь ссылочные переменные шаблона в одном диалоговом компоненте, которые указывали бы путь к файлу шаблона, и правильный шаблон будет показан с помощью интерполяции строк или каким-либо другим способом внедрения?

Другими словами, могу ли я динамически вводить содержимое одного файла шаблона в компонент, чтобы этот компонент мог вводить этот шаблон в свой собственный шаблон?

 ////script
@Component({...})
export class GenericDialogComponent implements OnInit {

  templateRef0 = ...
  templateRef1 = ...

  shownTemplate = null;

  constructor(@Inject(MAT_DIALOG_DATA) public chosenFeature) {}

  ngOnInit() : void {
    if (this.chosenFeature == "template0"){
       this.shownTemplate = this.templateRef0;
    } else if (this.chosenFeature === "template1")  {
       this.shownFeature = this.templateRef1;
    }
  }

}

////template

<main>

<section>
 {{shownTemplate}}
</section>


</main>

////example of the file structure
generic-dialog/
  template0.html
  template1.html
  generic-dialog.component.ts
  generic-dialog.component.html
  generic-dialog.component.css
  

Вы можете реализовать это с помощью атрибута selector компонента и служб.

Каждая директива @Component имеет атрибут селектора. Шаблон (html) компонента отображается там, где размещен этот селектор. После импорта компонента в модуль app.module / feature на основе проекта этот селектор можно добавить в HTML-файл любого компонента, и он будет отображаться.

Что касается обработки событий, подобных нажатию кнопки, я бы рекомендовал, чтобы это действие обрабатывалось в сервисе для простоты разработки.

Пожалуйста, обратитесь к официальной документации для получения подробной информации о том, как достичь желаемого -> https://angular.io/guide/dynamic-component-loader

Я думаю, что документация объясняет это очень хорошо, но, по сути, вы определяете ng-template с помощью директивы, это позволяет angular знать, где должны быть загружены динамические компоненты. Затем вы получаете компоненты, которые хотите динамически отображать, из службы (или из любого другого места, где захотите) и используете ComponentFactoryResolver для разрешения ComponentFactory для каждого компонента, а затем используете это и директиву, которую вы ранее определили, для создания компонента внутри ng-template.

В вашем конкретном случае вам просто нужно обработать логику, чтобы увидеть, какой компонент создавать внутри вашего GenericDialogComponent . Просто имейте в виду, что вам нужно создавать компонент для каждого html, который вы хотите иметь, вы не можете создавать отдельные html-файлы без компонента и указывать на них.