Веб-сайт, который я создаю, состоит из нескольких компонентов. В компоненте «Домашняя страница», когда пользователь нажимает кнопку, чтобы добавить что-то на страницу, я хочу добавить компонент по своему выбору к «домашнему» компоненту. Я исследовал и нашел 3 способа сделать это, но я хочу знать, что лучше всего использовать для такой функции. Страница будет инициализирована с некоторыми компонентами, уже добавленными другими пользователями. Я хочу, чтобы пользователи могли добавлять туда компоненты.
Angular говорит, что я должен сделать это следующим образом: https://angular.io/guide/dynamic-component-loader
Angular Material говорит, что я должен сделать это следующим образом: https://material.angular.io/cdk/portal/overview
И я лично ожидал этого (который работает), но я не думаю, что это "лучшая практика":
Поэтому, когда пользователь нажимает на этот тег, он запускает метод добавления:
<a class="dropdown-item" href="#!" (click)="prependMedia('elementOne')">ElementOne</a>
Этот метод вызывает это в файле TS компонента, эффективно проталкивая новый элемент в массив. Затем указанный HTML-код будет следить за добавлением нового элемента и помещать компонент в ngFor:
Файл TypeScript:
mediaElements: any[] = [];
element: any = {
name: 'elementOne',
data: 'data'
};
constructor() { }
ngOnInit() {}
prependMedia(type: string) {
console.log(type);
this.mediaElements.push(this.element);
}
HTML-файл, который добавит компонент после добавления новой модели для него в массив mediaElements:
<div *ngFor="let element of mediaElements" [(ngModel)]="mediaElements">
<div *ngIf="element.name == 'elementOne'">
<app-elementone></app-elementone>
</div>
</div>
Мой вопрос: что не так с методом, который я использую с ngFor? Не самоуверенно, а технически. Каков наилучший способ добавления компонента в DOM, когда пользователь нажимает кнопку, чтобы добавить его на страницу? И почему? Не самоуверенным образом, а технически или с доказательствами от команды Angular.
Изначально я собирался использовать то, что я показал в коде, но теперь я нашел и метод Angular, и способ Angular Material, и я ищу факты о том, как лучше всего.
Пожалуйста, порекомендуйте? Поскольку некоторые люди считают, что это слишком открыто для мнений, будет лучше, если вы оставите его техническим.
Дайте мне знать, если вам понадобится дальнейшее описание.
Спасибо, Эрик
