Что такое templateUrls и styleUrls в Angular?

Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.

Используя Angular, вы можете разделить страницы, диалоги или другие разделы вашего приложения на компоненты. Компоненты в приложении Angular в основном состоят из файлов HTML, CSS и TypeScript.

В файле TypeScript вы можете добавить любую логику, необходимую для работы пользовательского интерфейса, например получение данных с сервера.

Вы также можете визуализировать HTML и CSS компонента с помощью TypeScript, указав его атрибуты шаблона и стиля. Вы можете использовать templateUrl или styleUrls для ссылки на внешние файлы HTML или CSS.

Что такое шаблон и templateUrl в Angular?

Когда ты создать свой собственный компонент в Angular, вы можете визуализировать HTML для него с помощью шаблона. Есть два способа написать HTML-шаблон:

• Вы можете написать свой HTML-код внутри шаблона в самом файле TypeScript.
instagram viewer
• Вы можете написать свой код HTML во внешнем файле и связать файл TypeScript с этим файлом HTML.

В новом компоненте вы можете установить атрибуты "template" или "templateUrl" в зависимости от того, где вы пишете свой HTML.

1. Создать новое угловое приложение.
2. В терминале вашего приложения запустите нг генерировать компонент Команда для создания нового компонента. Назовите новый компонент about-page.

   ng сгенерировать компонент about-page

3. В приложение.component.html, замените текущий код тегами для вашего нового компонента:

   <приложение-о-странице></app-about-page>

4. Открой о-page.component.ts файл. Если у вас не так много HTML-кода, вы можете использовать атрибут шаблона, чтобы написать его непосредственно в файле TypeScript. Замените декоратор @Component следующим:

   @Компонент({
    селектор: 'приложение-о-странице',
    шаблон: '<h2>О странице</h2><бр><п>Это рендеринг HTML из файла TypeScript!</п>'
   })
   

5. Если вы хотите включить многострочный шаблон, вы можете вместо этого использовать обратные кавычки:

   @Компонент({
    селектор: 'приложение-о-странице',
    шаблон: `<h2>О странице</h2>
   <бр>
   <п>Это рендеринг HTML из файла TypeScript!</п>`
   })

6. В терминале введите нг служить чтобы скомпилировать ваш код и запустить его в веб-браузере. Откройте свое приложение на http://localhost: 4200/. Ваш HTML-код из файла TypeScript будет отображаться на странице.
7. В о-page.component.ts, вместо этого замените "template" на "templateUrl". Включите ссылку на внешний HTML-файл компонента. Вы можете использовать «templateUrl», если у вас есть более сложный HTML-код, для которого требуется отдельный файл.

   @Компонент({
    селектор: 'приложение-о-странице',
    URL-адрес шаблона: './about-page.component.html'
   })

8. Добавьте HTML-код в о-page.component.html файл:

   <h2>О странице</h2>
   <п>Это рендеринг HTML из файла HTML!</п>

9. Вернитесь в браузер или перезапустите нг служить для повторной компиляции вашего кода. Откройте свое приложение на http://localhost: 4200/. Теперь браузер отображает HTML из о-page.component.html файл.

Что такое стили и URL-адреса стилей в Angular?

Как и в случае с HTML, вы можете использовать либо «style», либо «styleUrls» в зависимости от того, где вы решили хранить свой CSS.

Вы можете включить CSS в код TypeScript, если у вас очень простые объявления CSS. В противном случае вы можете использовать «styleUrls», чтобы связать файл TypeScript с внешним CSS, который содержит больше стилей.

1. В ранее созданном приложении Angular откройте о-page.component.ts файл. Добавьте атрибут «styles» к компоненту. Внутри «styles» добавьте стиль CSS для страницы:

   @Компонент({
    селектор: 'приложение-о-странице',
    URL-адрес шаблона: './about-page.component.html',
    стили: ['h2 {цвет: красный}','р {цвет: зеленый}']
   })

2. В терминале введите нг служить чтобы скомпилировать ваш код и запустить его в веб-браузере. Откройте свое приложение на http://localhost: 4200/, чтобы просмотреть стиль, указанный в файле TypeScript.
3. Если у вас много CSS, используйте «styleUrls» вместо «styles», чтобы связать файл TypeScript с внешним файлом CSS. В о-page.component.ts, замените декоратор @Component следующим:

   @Компонент({
    селектор: 'приложение-о-странице',
    URL-адрес шаблона: './about-page.component.html',
    URL стиля: ['./о странице.компонент.css']
   })

4. Добавьте стили CSS к о-page.component.css:

   ч2 {
    цвет синий
   }
   п {
    цвет: темно-оранжевый
   }

5. Вернитесь в браузер или перезапустите нг служить для повторной компиляции вашего кода. Откройте свое приложение на http://localhost: 4200/ для просмотра стилей, используемых из внешнего файла CSS.

Рендеринг HTML компонента в Angular

Теперь вы знаете, как можно отображать содержимое HTML и CSS в приложении Angular различными способами. Вы можете определить, какой подход вы хотите использовать, исходя из сложности вашего HTML и CSS.

Если интересно, вы можете изучить, как передавать данные между файлами HTML и TypeScript компонента Angular.