Angular 5 i flex layout – dlaczego nie działa?
Pisząc w pracy aplikację webową natknąłem się na problem, którego rozwiązaniem się z Wami podzielę. Dojście do działającej wersji zajęło mi dobre kilka godzin dlatego mam nadzieję, że komuś tym tekstem uproszczę pracę.
Problematyczna stopka
Chcę wykorzystać właściwości display: flex; z CSSa do zrobienia stopki, która jest zawsze na dole ekranu. Chodzi o zachowanie jak na poniższym obrazku:
Jak powinno być
Problem znany i powszechnie opisany dlatego łatwo go znaleźć w internecie. Standardowo, wg wielu poradników robi się to w ten sposób:
HTML:
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS:
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
Łatwo i skutecznie. Działa na wszystkich nowszych przeglądarkach, bez nadmiaru magii.
Jak jest w Angularze
Jednak w Angularze 2+ takie rozwiązanie nie do końca działa. Dlaczego? Bo Angular działa na komponentach. A komponenty są widoczne w wynikowym kodzie HTML.
W najprostszym przykładzie, gdzie mamy tylko AppComponent i w nim dodajemy footer, nasz kod HTML będzie wyglądał mniej więcej tak:
<body>
<app-root>
<div class="content">
content
</div>
<footer class="footer"></footer>
</app-root>
</body>
Widzicie element <app-root> ? Nie ma on wpływu na renderowanie treści. Ale jak się okazuje ma wpływ na style.
Jak się okazuje, żeby mój przykład działał w Angularze muszę dla tego, i każdego innego ponad naszym contentem, elementu dodać takie style:
display: flex; flex-direction: column; height: 100%
Tylko jak to zrobić? W końcu nasz komponent nie ma żadnej swojej klasy. Nie widzimy go też w kodzie HTML, który piszemy, pojawia się dopiero po uruchomieniu aplikacji.
Otóż rozwiązaniem w tym wypadku jest skorzystanie ze specjalnego selektora :host . Odnosi się on do komponentu, dla którego dodajemy style. Tak więc w naszym przypadku musi się on znaleźć w stylach dla komponentu AppComponent. Jeżeli korzystasz z osobnych plików ze stylami to Twój plik app.component.css będzie wyglądał następująco:
:host {
display: flex;
flex-direction: column;
height: 100%;
}
Jeszcze do tego uwaga dla osób piszący w SASSie zamiast w CSSie. W wersji, z której ja korzystam, a jest ona raczej świeża, jest pewien problem z tym selektorem. Mianowicie jeśli wpiszecie go tak jak powyżej to dostaniecie błąd z nieprawidłowym znakiem : . Niestety w niektórych wersjach kompilatora SASSa trzeba wyescapować znak dwukropka. Dlatego w pliku app.component.sass będziesz miał taki zapis:
\:host display: flex flex-direction: column height: 100%
Zwróć uwagę na backslash na początku. Wtedy błąd powinien nie wystąpić.
Leave a Comment