向下

Question

使用<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足够接近，其他人可以理解打字稿。）

我经常看不到这一点，所以我猜它有一个很好的理由，但这对我来说似乎很好，否则你基本上有两个根组件，正文和我的应用程序。

Answer 1

如果您使用“正文”作为应用的选择器，它会起作用，但存在一些问题：

Web组件规范说使用自定义 元素或自定义属性，并且它不使用官方html元素。< / p>
官方style guide建议为您的组件使用“自定义前缀”，例如'myComponent'。此外，如果你想使用一些像tslint这样的linter和'component-selector-prefix'配置来检查它，它会抛出一个警告，使用没有前缀的'body'选择器。
如果在选择器（主体）内部有一些元素，它们将被隐藏为角度，也许你会想要在主体或其他组件中加入一些“脚本”，例如'webpack'put身体底部的脚本，也许它会起作用但不是预期的......

最佳。

Answer 2

如果您希望Angular控制整个页面，只需使用body作为选择器。另请参阅How do I change the body class via a typescript class (angular2)

Answer 3

你可以而且不会发生任何不好的事情（除非你有两个身体标签）。不过，不要这样做是因为：

向下

选择器应该反映您应用的独特内容。

Answer 4

说实话，这个框架还很新，我们真的没有答案。话虽这么说，从技术上来说，如果你使用<body>作为根元素，我认为没有什么会破坏，虽然从概念上讲，我认为它会让你进入一个角落，你最终会回到使用稍后自定义根元素。

例如，您可能希望在页面上有一些静态样式或项目，而angular不能控制，但不属于<body>，例如，如果使用CSS框架（如bootstrap），则可能需要包装您的网站位于class="container"，或者可能只有一个静态页眉或页脚，只包含链接。当然，这些也可以在组件中轻松处理。

另一个需要考虑的问题是浏览器支持，这在某些浏览器中可能会运行得很好，但在其他浏览器中却不行，不确定。

所以我猜答案是＆＃34;我们还不知道＆＃34;，因为这是以前版本中ng-app的一种非常常见的做法，它可能是想到了，尽管由于团队中的大多数示例都使用自定义根元素作为推荐方式，但可能有一个原因我们还不知道。

进一步的想法：如何使用<html>作为根元素......？谁知道呢。

Answer 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';
}

Angular 2，使用body作为根选择器，而不是my-app

5 个答案:

向下