Различия в использовании компонента Component против templateUrl

Angular 2 позволяет писать многострочные шаблоны, используя символы 'для их добавления в кавычки. Также можно поместить многострочный шаблон в файл .html и ссылаться на него с помощью templateUrl.

Мне кажется удобным поместить шаблон непосредственно в компонент, а затем все это в одном месте, но есть ли какой-либо недостаток в этом?

1-й подход:

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: '
    <h1>My First Angular 2 multiline template</h1>
    <p>Second line</p> 
    '
})
export class AppComponent { }

против 2-го подхода:

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    templateUrl: 'multi-line.html'
})
export class AppComponent { }

вместе с multi-line.html:

<h1>My First Angular 2 multiline template</h1>
<p>Second line</p>

Ответы

Ответ 1

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

Для разработчика, однако, существует ряд различий, которые вы должны учитывать.

В большинстве случаев, когда HTML находится в отдельном файле .html, вы получаете более качественное завершение кода и встроенную поддержку в своем редакторе/среде IDE. (IntelliJ IDEA, по крайней мере, поддерживает HTML для встроенных шаблонов и строк)
Существует фактор удобства с кодом и связанным с ним HTML в том же файле. Легче видеть, как эти два относятся друг к другу.

Эти две вещи будут одинаково ценны для многих людей, поэтому вы просто выбираете своего фаворита и продвигаетесь вперед, если это все, что было для него.

Но это приводит нас к причинам, по которым вы должны хранить свои шаблоны в своих компонентах, на мой взгляд:

Трудно сделать использование относительных путей к файлам для внешних шаблонов, поскольку в настоящее время он стоит в Angular 2.
Использование не относительных путей для внешних шаблонов делает ваши компоненты менее переносимыми, поскольку вам необходимо управлять всеми типами ссылок /where/is/my/template от корня, которые изменяются в зависимости от того, насколько глубоко ваш компонент.

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

Ответ 2

Недостатки в том, что инструменты IDE не так сильны, как упоминалось выше, и добавление больших фрагментов html в ваши компоненты затрудняет их чтение.

Кроме того, если вы следуете руководству по стилю angular2, оно рекомендует делать извлечение шаблонов в отдельный файл, если длина превышает 3 строки.

В руководстве по стилю angular2:

Сделайте извлечение шаблонов и стилей в отдельный файл, когда более 3 линии.

Почему? Синтаксические подсказки для встроенных шаблонов в (.js и .ts) кодовых файлах не поддерживается некоторыми редакторами.

Почему? Логику компонентного файла легче читать, если не смешивать с встроенный шаблон и стили.

Источник

Ответ 3

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

С templateUrl вы ссылаетесь на внешний файл, содержащий шаблон HTML. Таким образом, вы имеете HTML и TypeScript в отдельных файлах.

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

Руководство по стилю Angular2 предлагает не иметь встроенных шаблонов с более чем тремя строками.

Ответ 4

Большинство ответов шва вокруг поддержки редактора, но, хотя этот аргумент верен, я бы не стал спорить об этом как о сильной точке для размещения html и css в файлах .html и .css.

Основная причина, по которой я отделяю файлы html и css, заключается в том, что он следует SRP. Это позволяет легко переносить переносимость кода и повторное использование, поскольку Angular изменяет версии и синтаксис того, как должен быть выложен typescript, ваши html и css остаются по большей части одинаковыми.

Ответ 5

Один из недостатков размещения вашего HTML-шаблона в отдельный файл может произойти, если вы разрабатываете Angular2 + библиотеку, которая должна использоваться в других проектах.

В этом случае пользователи вашей библиотеки не смогут успешно выполнить компиляцию JIT, если они не используют загрузчики шаблонов, такие как angular2-template-loader или angular2-rollup или любой другой, в зависимости от комплекта, который должен быть правильно настроен, что иногда может быть сложным.

Чтобы избежать этого недостатка и по-прежнему иметь шаблоны в отдельных файлах (что, по моему мнению, довольно удобно), разработчик библиотеки может в конечном итоге встроить шаблоны с помощью Gulp плагина, такого как gulp -inline-ng2-template или любой другой. Но это будет означать дополнительный уровень сложности при создании версии библиотеки ES2015.

Ответ 6

Кажется, теперь работает.

@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

Взято из 'tour of heros' https://angular.io/docs/ts/latest/tutorial/toh-pt5.html и адаптировано для проверки этой конкретной проблемы.

angular2 @2.0.0-beta.8