Меню ×
Шаблон и стили компонента

Шаблон и стили компонента

Подключение шаблона

Рассмотрим файл app\servers\servers.component.ts, сейчас шаблон подключен как внешний файл:

	
@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
	

Шаблон не обязательно должен быть внешним файлом:

	
@Component({
  selector: 'app-servers',
  template: '<app-server></app-server><app-server></app-server>'
  styleUrls: ['./servers.component.css']
	

Для многострочного варианта нужно заменить символ кавычек на с ' на ':

	
@Component({
  selector: 'app-servers',
  template: `
  <app-server></app-server>
  <app-server></app-server>`,
  styleUrls: ['./servers.component.css']
	

Работа со стилями компонента

Для работы с html удобно использовать emmit.

Внесем изменения в app.component.html:

	
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h3>I'am in the AppComponent!</h3>
      <hr />
      <app-servers></app-servers>
    </div>
  </div>
</div>
	

В Файлах *.component.ts стили подключаются либо как массив внешних файлов:

	
styleUrls: ['./app.component.css']
	

Либо, как массив строк:

	
style: [`
  h3 {
    color: blue;
  }
`]
	

Похожие материалы

Обновление шаблона при динамическом роутинге и отписка от наблюдения

Angular применяется для создания одностраничных приложений - SPA (Single Page Applications). Angular создает рендер программы, в отличие от подхода, когда весь контент загружен в DOM, а JavaScript его меняет.

Навигация в Angular на основе событий. Передача данных между вложенными компонентами с помощью событий в Angular

наверх