Angular 2, используя тело как селектор root, вместо my-app

Есть ли недостатки использования тега <body> вместо тега <my-app> для корневого компонента?

import 'package:angular2/angular2.dart';
@Component(
    selector: 'body',
    template: '''
      <h1>My First Angular 2 App</h1>

      <div>{{greet}}</div>
    ''',
    styles: const ['''
      :host {
        height: 100vh;
      }
      h1 {
        color: red;
      }
    '''])
class AppComponent {
  String greet = 'Hello world';
}

(Код здесь Dart, но я надеюсь, что он достаточно близко к ES6, typescript для понимания другими людьми.)

Я не вижу этого часто, поэтому я думаю, что для этого есть веская причина, но мне это кажется приятным, иначе у вас в основном есть два корневых компонента, тело и мое приложение.

Ответ 1

Если вы хотите, чтобы Angular управлял всей страницей, используйте body как селектор. См. Также Как изменить класс тела с помощью класса typescript (angular2)

Ответ 2

Если вы используете "body" в качестве селектора для своего приложения, оно будет работать, но есть некоторые проблемы:

В спецификации веб-компонента сказано, что используются пользовательские элементы или пользовательские атрибуты, и он не использует официальные элементы HTML.
Официальное руководство по стилю предлагает использовать "пользовательский префикс" для таких компонентов, как "myComponent". Также, если вы хотите использовать какой-либо тип linter, такой как tslint, с конфигурацией 'component-selector-prefix', чтобы проверить это, он выдаст предупреждение об использовании селектора body без префикса.
Если внутри селектора (тела) есть какие-то элементы, они будут скрыты под углом, возможно, вы захотите поместить некоторые "скрипты" в тело или другой компонент, например, "webpack" поместит скрипты внизу тело, и, возможно, это будет работать, но не так, как ожидалось...

Лучший.

Ответ 3

Вы можете и ничего плохого не произойдет (если у вас нет двух тегов тела). Тем не менее, не делайте этого, потому что:

Вниз сторона

Селектор должен отражать что-то уникальное для вашего приложения.

Ответ 4

Честно говоря, структура все еще очень новая, и на самом деле у нас нет ответа. При этом технически я не думаю, что есть что-то, что сломается, если вы используете <body> в качестве корневого элемента, хотя концептуально я думаю, что он помещает вас в угол, который вы в конечном итоге перейдете к использованию пользовательского корневого элемента позже.

Например, может быть какой-то статический стиль или элементы, которые вы хотели бы на странице, которые angular не контролирует, но не относится к <body>, например, если вы используете фреймворк CSS, такой как загрузочный лоток, который вы можете обернуть ваш сайт в class="container" или может иметь статический верхний или нижний колонтитул на странице, которая просто содержит ссылки. Разумеется, их можно было легко обрабатывать и в компонентах.

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

Итак, я думаю, что ответ "Мы еще не знаем", поскольку это была довольно распространенная практика с ng-app в предыдущей версии, возможно, это было что-то, о чем думали, хотя, поскольку большинство примеров из команда show с использованием настраиваемого корневого элемента как рекомендуемого способа, может быть причина для этого, о которой мы еще не знаем.

Дальнейшие мысли: как насчет использования <html> в качестве корневого элемента...? Кто знает.

Ответ 5

Все друзья выше правы о недостатках. Но как насчет <body foo-root>?

import 'package:angular2/angular2.dart';
@Component(
    selector: 'body[foo-root]',
    template: '''
      <h1>My First Angular 2 App</h1>

      <div>{{greet}}</div>
    ''',
    styles: const ['''
      :host {
        height: 100vh;
      }
      h1 {
        color: red;
      }
    '''])
class AppComponent {
  String greet = 'Hello world';
}