Co to są templateUrls i styleUrls w Angular?

Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską.

Korzystając z Angular, możesz rozdzielić strony, okna dialogowe lub inne sekcje aplikacji na komponenty. Komponenty aplikacji Angular składają się głównie z plików HTML, CSS i TypeScript.

W pliku TypeScript możesz dodać dowolną logikę wymaganą do działania interfejsu użytkownika, na przykład pobieranie danych z serwera.

Możesz także renderować kod HTML i CSS komponentu przy użyciu języka TypeScript, określając atrybuty szablonu i stylu. Możesz użyć templateUrl lub styleUrls, aby połączyć się z zewnętrznymi plikami HTML lub CSS.

Co to jest szablon i templateUrl w Angular?

Kiedy ty stworzyć własny komponent w Angular, możesz wyrenderować kod HTML za pomocą szablonu. Szablon HTML można napisać na dwa sposoby:

• Możesz napisać swój kod HTML wewnątrz szablonu w samym pliku TypeScript.
instagram viewer
• Możesz zapisać swój kod HTML w zewnętrznym pliku i połączyć plik TypeScript z tym plikiem HTML.

W nowym komponencie możesz ustawić atrybuty „template” lub „templateUrl” w zależności od tego, gdzie piszesz kod HTML.

1. Stwórz nowa aplikacja Angulara.
2. W terminalu swojej aplikacji uruchom plik generować komponent polecenie utworzenia nowego komponentu. Nazwij nowy komponent „about-page”.

   Wygeneruj stronę o składniku

3. W aplikacja.komponent.html, zastąp bieżący kod tagami dla nowego komponentu:

   <strona o aplikacji></app-about-page>

4. Otworzyć about-page.component.ts plik. Jeśli nie masz dużo kodu HTML, możesz użyć atrybutu szablonu, aby zapisać go bezpośrednio w pliku TypeScript. Zamień dekorator @Component na następujący:

   @Część({
    selektor: 'strona o aplikacji',
    szablon: '<h2>O stronie</h2><br><P>To jest renderowanie kodu HTML z pliku TypeScript!</P>'
   })
   

5. Jeśli chcesz dołączyć szablon wielowierszowy, możesz zamiast tego użyć cudzysłowów:

   @Część({
    selektor: 'strona o aplikacji',
    szablon: `<h2>O stronie</h2>
   <br>
   <P>To jest renderowanie kodu HTML z pliku TypeScript!</P>`
   })

6. W terminalu wpisz służyć skompilować kod i uruchomić go w przeglądarce internetowej. Otwórz swoją aplikację na http://localhost: 4200/. Twój kod HTML z pliku TypeScript zostanie wyrenderowany na stronie.
7. W about-page.component.ts, zamiast tego zamień „template” na „templateUrl”. Dołącz link do zewnętrznego pliku HTML komponentu. Możesz użyć „templateUrl”, jeśli masz bardziej złożony kod HTML, który wymaga własnego pliku.

   @Część({
    selektor: 'strona o aplikacji',
    URL szablonu: './about-page.component.html'
   })

8. Dodaj kod HTML do pliku strona-informacyjna.komponent.html plik:

   <h2>O stronie</h2>
   <P>To jest renderowanie kodu HTML z pliku HTML!</P>

9. Wróć do przeglądarki lub uruchom ponownie służyć aby ponownie skompilować swój kod. Otwórz swoją aplikację na http://localhost: 4200/. Przeglądarka renderuje teraz kod HTML z pliku strona-informacyjna.komponent.html plik.

Czym są style i styleUrls w Angular?

Podobnie jak w przypadku HTML, możesz użyć „style” lub „styleUrls” w zależności od tego, gdzie chcesz przechowywać swój CSS.

Możesz dołączyć CSS do kodu TypeScript, jeśli masz bardzo proste deklaracje CSS. W przeciwnym razie możesz użyć „styleUrls”, aby połączyć plik TypeScript z zewnętrznym CSS, który zawiera więcej stylów.

1. W utworzonej wcześniej aplikacji Angular otwórz plik about-page.component.ts plik. Dodaj atrybut „styles” do komponentu. Wewnątrz „style” dodaj swój styl CSS dla strony:

   @Część({
    selektor: 'strona o aplikacji',
    URL szablonu: './about-page.component.html',
    style: ['h2 {kolor: czerwony}','p {kolor: zielony}']
   })

2. W terminalu wpisz służyć skompilować kod i uruchomić go w przeglądarce internetowej. Otwórz swoją aplikację na http://localhost: 4200/, aby wyświetlić styl określony w pliku TypeScript.
3. Jeśli masz dużo CSS, użyj „styleUrls” zamiast „styles”, aby połączyć plik TypeScript z zewnętrznym plikiem CSS. W about-page.component.ts, zamień dekorator @Component na następujący:

   @Część({
    selektor: 'strona o aplikacji',
    URL szablonu: './about-page.component.html',
    stylowe adresy URL: ['./about-page.component.css']
   })

4. Dodaj trochę stylów CSS do about-page.component.css:

   h2 {
    kolor niebieski
   }
   P {
    kolor: ciemnopomarańczowy
   }

5. Wróć do przeglądarki lub uruchom ponownie służyć aby ponownie skompilować swój kod. Otwórz swoją aplikację na http://localhost: 4200/, aby wyświetlić użyte style z zewnętrznego pliku CSS.

Renderowanie kodu HTML komponentu w Angular

Teraz znasz różne sposoby renderowania treści HTML i CSS w aplikacji Angular. Możesz określić, które podejście chcesz zastosować, na podstawie złożoności kodu HTML i CSS.

Jeśli jesteś zainteresowany, możesz dowiedzieć się, jak przekazywać dane między plikami HTML i TypeScript komponentu Angular.