Модальный компонент Angular 4 + Bootstrap

Поэтому я думаю о реализации компонента в приложении, которое может действовать как компонент в Bootstrap modal, а также обычный дочерний компонент на странице.

В примере (озаглавленном «Компоненты как содержимое» в нижней части страницы по ссылке выше) компонент, реализованный в вашем модальном окне, требует добавления NgbActiveModal в конструктор этого компонента. Когда я попытался сделать вышеописанное, это не позволило моему компоненту быть реализованным как обычный дочерний компонент.

Любые идеи, как обойти что-то подобное, не создавая компонент-оболочку?


angular ng-bootstrap
person jarodsmk    schedule 10.07.2017    source источник
comment
Взгляните на этот ответ который удовлетворит все ваши потребности   -  person Aravind    schedule 10.07.2017
comment
Спасибо за ответ @Aravind, но я использую ngx-bootstrap, а не ng2-bootstrap :)   -  person jarodsmk    schedule 10.07.2017
comment
ng2-bootstrap устарел и переименован в ngx-bootstrap   -  person Aravind    schedule 10.07.2017
comment
Приношу извинения, я использую ng-bootstrap (согласно ссылке в моем вопросе), к сожалению, я все еще не могу использовать предложенную вами ссылку (поскольку это загрузчик Valorsoft), которая использует разные компоненты и классы :( ng-bootstrap.github.io/#/home   -  person jarodsmk    schedule 11.07.2017
comment
Какие различия вы найдете в его использовании. Не могли бы вы помочь мне понять это   -  person Aravind    schedule 11.07.2017
comment
Конечно, например, родительский компонент может быть внедрен с помощью NgbModal, что позволяет создать модальное окно внутри этого компонента. Самому модальному модулю может быть передан компонент, чего я и пытаюсь добиться, но при этом использовать компонент как обычный дочерний компонент (то есть без модального). Дочерний компонент в этом случае (при реализации его в модальном режиме) должен быть введен с помощью NgbActiveModal, поэтому вы можете указать, на каком этапе закрывать модальный (например, когда вы выбираете «сохранить» в форме)   -  person jarodsmk    schedule 11.07.2017
comment
Сравните то, что я упомянул, со ссылкой, которую вы дали, вы можете видеть, что используются разные классы, и для моего конкретного проекта я не могу просто поменять библиотеку, которую я использую, к сожалению   -  person jarodsmk    schedule 11.07.2017
comment
Кроме того, все, о чем я говорил в сообщении, отправленном минуту назад, можно найти по ссылке, которую я разместил в своем вопросе, под заголовком «Компоненты как контент» :)   -  person jarodsmk    schedule 11.07.2017
comment
Ладно, я понял. мы можем синхронизировать через некоторое время. Я на своем рабочем месте.   -  person Aravind    schedule 11.07.2017
comment
Удивительный человек, не беспокойтесь - провожу здесь свои собственные эксперименты, пытаясь найти возможное решение.   -  person jarodsmk    schedule 11.07.2017
comment
связаться со мной на fb aravind2109. мы синхронизируем позже   -  person Aravind    schedule 11.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Поэтому мне удалось найти ответ в этом сообщении.

Добавив декоратор @Optional и изменив дочерний компонент, чтобы он выглядел следующим образом, вы можете написать дополнительный код, позволяющий ему работать в модальном режиме и как обычный компонент.

Декоратор @Optional в этом случае будет внедрять его только там, где компонент вызывается при использовании в качестве модального компонента. Я думал добавить ? модификатор параметра сделал бы то же самое, но, по-видимому, нет.

...
constructor(@Optional() private activeModal: NgbActiveModal){
    ...
}
    ...
finish(){
    if(this.activeModal){
        this.activeModal.dismiss(data);
    }else{
        //regular component finish code
    }
}

Большое спасибо @Aravind за готовность потратить свое личное время, чтобы помочь :) Ура, приятель.

person jarodsmk    schedule 11.07.2017