Próbuję znaleźć kilka przykładów, jak wykonać modalne okno dialogowe Potwierdzenie w Angular 2.0. Używałem okna dialogowego Bootstrap dla Angular 1.0 i nie mogę znaleźć żadnych przykładów w sieci dla Angular 2.0. Też sprawdziłem doktorów kątowych 2.0 bez powodzenia.
Czy istnieje sposób na użycie okna dialogowego Bootstrap w Angular 2.0?
modal-dialog
angular
user636525
źródło
źródło
Odpowiedzi:
`
Aby wyświetlić tło , potrzebujesz czegoś takiego jak ten CSS:
Przykład pozwala teraz na jednoczesne użycie wielu modali . (zobacz
onContainerClicked()
metodę).Dla użytkowników css Bootstrap 4 , musisz dokonać 1 drobnej zmiany (ponieważ nazwa klasy css została zaktualizowana z Bootstrap 3). Ten wiersz:
[ngClass]="{'in': visibleAnimate}"
należy zmienić na:[ngClass]="{'show': visibleAnimate}"
Aby zademonstrować, oto plunkr
źródło
div.modal-footer
i zmiana,.app-modal-footer
aby.modal-footer
to naprawić.Oto całkiem przyzwoity przykład tego, jak można używać modalu Bootstrap w aplikacji Angular2 na GitHub .
Istotą tego jest to, że możesz opakować inicjalizację bootstrap html i jquery w komponent. Stworzyłem
modal
komponent wielokrotnego użytku , który umożliwia otwieranie za pomocą zmiennej szablonu.Wystarczy zainstalować pakiet npm i zarejestrować moduł modalny w module aplikacji:
źródło
Jest to proste podejście, które nie zależy od jquery ani żadnej innej biblioteki poza Angular 2. Poniższy komponent (errorMessage.ts) może być użyty jako widok potomny dowolnego innego komponentu. Jest to po prostu modal bootstrap, który jest zawsze otwarty lub pokazany. O jego widoczności decyduje instrukcja ngIf.
errorMessage.ts
errorMessage.html
Oto przykład kontroli rodzicielskiej (część nieistotnego kodu została pominięta ze względu na zwięzłość):
rodzic.ts
parent.html
źródło
class="modal fade show in danger"
Teraz dostępny jako pakiet NPM
kątowe-niestandardowe-modalne
@Stephen Paul kontynuacja ...
ngOnDestroy
(ed) po wyjściu z trybu modalnego.Leniwa inicjalizacja treści
Czemu?
W niektórych przypadkach możesz nie chcieć modować, aby zachować jego status po zamknięciu, ale raczej przywrócić stan początkowy.
Oryginalny problem modalny
Przekazanie zawartości bezpośrednio do widoku faktycznie generuje ją, inicjalizując ją jeszcze przed pobraniem przez modal. Modal nie ma sposobu na zabicie takiej zawartości, nawet jeśli używa
*ngIf
opakowania.Rozwiązanie
ng-template
.ng-template
nie renderuje się, dopóki nie otrzyma polecenia.my-component.module.ts
my-component.ts
modal.component.ts
modal.component.html
Bibliografia
Muszę powiedzieć, że nie byłoby to możliwe bez doskonałej oficjalnej i społecznościowej dokumentacji dostępnej w sieci. To może pomóc niektórym z was też lepiej zrozumieć, w jaki sposób
ng-template
,*ngTemplateOutlet
i@ContentChild
praca.https://angular.io/api/common/NgTemplateOutlet
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
https://medium.com/claritydesignsystem/ng-content -the-hidden-docs-96a29d70d11b
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in -angular-896b0c689f6e
Pełne rozwiązanie kopiuj-wklej
modal.component.html
modal.component.ts
modal.module.ts
źródło
W moim projekcie używam ngx-bootstrap .
Możesz znaleźć demo tutaj
Github jest tutaj
Jak używać:
Zainstaluj plik ngx-bootstrap
Importuj do swojego modułu
źródło
Oto moja pełna implementacja modalnego komponentu angular2 bootstrap:
Zakładam, że w swoim głównym pliku index.html (z tagami
<html>
i<body>
) na dole<body>
tagu masz:modal.component.ts:
modal.html:
I przykład użycia w komponencie Client Editor: client-edit-component.ts:
client-edit.html:
Oczywiście
title
,showClose
,<mhead>
a<mfoot>
ar opcjonalne Parametry / tagi.źródło
bindModal(modal) {this._modal=modal;}
można użyć kątowych zaViewChild
adnotacji, tak jak poniżej:@ViewChild('editModal') _modal: Modal;
. Zajmuje się wiązaniem za kulisami.Sprawdź okno dialogowe ASUI, które tworzy się w czasie wykonywania. Nie ma potrzeby ukrywania i pokazywania logiki. Usługa Simply Service utworzy komponent w czasie wykonywania przy użyciu AOT ASUI NPM
źródło
spróbuj użyć ng-window, pozwala programistom na otwieranie i pełną kontrolę wielu okien w aplikacjach jednostronicowych w prosty sposób, bez Jquery, bez Bootstrap.
Avilable Configration
źródło
Kątowy 7 + NgBootstrap
Prosty sposób na otwarcie modalu z głównego komponentu i przekazanie do niego wyniku. jest tym, czego chciałem. Stworzyłem samouczek krok po kroku, który obejmuje tworzenie nowego projektu od podstaw, instalację ngbootstrap i tworzenie modalu. Możesz go sklonować lub postępować zgodnie z instrukcjami.
Mam nadzieję, że to pomoże nowicjuszom w Angular.!
https://github.com/wkaczurba/modal-demo
Detale:
szablon modal-simple (modal-simple.component.html):
Plik modal-simple.component.ts:
Demo (app.component.html) - prosty sposób radzenia sobie ze zdarzeniem zwrotu:
app.component.ts - onModalClosed jest wykonywany po zamknięciu modalu:
Twoje zdrowie
źródło