Блог

Главная - Вопросы по программированию - Angular ngx-модель начальной загрузки без ng-шаблона

Angular ngx-модель начальной загрузки без ng-шаблона

#angular #ngx-bootstrap

#angular #ngx-bootstrap

Вопрос:

Я хочу поместить модал из bootstrap в свое приложение. Для меня важно создать модель самостоятельно. С примером ngx-начальной загрузки ng-template это невозможно сделать. Есть ли какое-либо лучшее решение вместо этого???

 <ng-template #template>  
    <div class="modal-header-custom">  
      <h4 class="modal-title pull-left">Modal</h4> 
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">  
        <span aria-hidden="true">×</span>  
      </button>  
   </div>
   <div class="modal-body"></div>
</ng-template>

Комментарии:

1. Что на самом деле вы хотите реализовать? Можете ли вы перефразировать вопрос?

2. Я хочу создать модальный стиль самостоятельно, как показано в моих вопросах. Это невозможно с помощью приведенного выше решения

Ответ №1:

В основном, что вы можете сделать, это создать пользовательский угловой модальный компонент в виде оболочки с желаемым внешним видом и стилем.

Пример HTML-компонента:

 <div class="custom-modal">
    <div class="custom-modal-body">
        <ng-content></ng-content> <!--used for content projection-->
    </div>
</div>
<div class="custom-modal-background"></div>

После этого вы создаете модальный сервис, чтобы он мог добавлять и удалять модальные по щелчку. Например:

 export class ModalService {
    private modals: any[] = [];

    add(modal: any) {
        this.modals.push(modal);
    }

    remove(id: string) {
        this.modals = this.modals.filter(x => x.id !== id);
    }

    open(id: string) {
        const modal = this.modals.find(x => x.id === id);
        modal.open();
    }

    close(id: string) {
        const modal = this.modals.find(x => x.id === id);
        modal.close();
    }
}

Как только вы закончите с сервисом, вы можете сгенерировать некоторый компонент, который будет являться оболочкой для модального компонента оболочки, где будет использоваться проекция содержимого. Например:

 <custom-modal id="custom-modal-1">
    <h1>A Custom Modal!</h1>
    <p>Home page text: <input type="text" [(ngModel)]="bodyText" /></p>
    <button (click)="closeModal('custom-modal-1');">Close</button>
</custom-modal>

Это самая простая форма создания пользовательской модальной формы, я предлагаю вам использовать ее с каким-либо типом материала Angular, поскольку модалы могут быть сложными для обработки после пользовательской реализации.

Для получения полного примера, пожалуйста, смотрите Этот stackblitz:

https://stackblitz.com/edit/angular-custom-modal-custom

Я надеюсь, что это поможет вам, счастливого кодирования

Ответ №2:

Если вы хотите кардинально изменить стиль (изменить тему) модального, я бы посмотрел на применение разных стилей CSS к модальным классам. Взгляните на SCSS-источник, чтобы определить, на какие классы вам нужно ориентироваться:

https://github.com/twbs/bootstrap/blob/main/scss/_modal.scss