web-dev-qa-db-ja.com

Angular 2、my-appの代わりにbodyをルートセレクターとして使用

ルートコンポーネントに<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に十分近いことを願っています。）

私はこれをあまり見ないので、それには正当な理由があると思いますが、これは私にはいいようです。そうでなければ、基本的に2つのルートコンポーネント、bodyとmy-appがあります。

typescriptdartangular
12
Kasper

Angularでページ全体を制御する場合は、セレクターとしてbodyを使用します。関連項目 TypeScriptクラス（angular2）を介してbodyクラスを変更するにはどうすればよいですか

5
Günter Zöchbauer

アプリのセレクターとして「body」を使用すると機能しますが、いくつかの問題があります。

  • Webコンポーネントの仕様では、customelementsまたはカスタム属性であり、公式のhtml要素を使用しません。

  • 公式 スタイルガイド は、 'myComponent'のようなコンポーネントに「カスタムプレフィックス」を使用することを提案しています。また、tslintのようなリンターを 'component-selector-prefix'構成で使用してそれを確認する場合は、プレフィックスなしで 'body'セレクターを使用するように警告がスローされます。

  • セレクター（本体）内にいくつかの要素がある場合、それらは角度のために非表示になります。本体または別のコンポーネント内にいくつかの「スクリプト」を配置する必要があります。たとえば、「webpack」はスクリプトを下部に配置します。体、そして多分それはうまくいくでしょうが、期待通りではありません...

ベスト。

6
Damsorian

可能であり、悪いことは何も起こりません（2つのbodyタグがない限り）。それでも、次の理由でそれを行わないでください。

欠点

セレクターは、アプリに固有の何かを反映する必要があります。

2
basarat

正直なところ、フレームワークはまだ非常に新しく、その答えはありません。そうは言っても、技術的には、ルート要素として<body>を使用しても問題が発生することはないと思いますが、概念的には、最終的にカスタムルートの使用に戻るコーナーに入ると思います。後で要素。

たとえば、次のようなCSSフレームワークを使用している場合、angularは制御しませんが、<body>に属さない静的なスタイルやアイテムがページにある場合があります。 bootstrapサイトをclass="container"でラップするか、リンクを含むだけのページへの静的ヘッダーまたはフッターを作成することができます。もちろん、これらはで簡単に処理できます。コンポーネントも同様です。

考慮すべきもう1つの項目は、ブラウザーのサポートです。これは、一部のブラウザーでは非常にうまく機能する可能性がありますが、他のブラウザーでは機能しない可能性があります。

ですから、答えは「まだわかりません」だと思います。これは前のバージョンのng-appでかなり一般的な方法だったので、チームのほとんどの例以来、考えられていたかもしれません。推奨される方法としてカスタムルート要素を使用して表示します。これには、まだわからない理由がある可能性があります。

さらなる考察：ルート要素として<html>を使用するのはどうですか...？知るか。

1
SnareChops

上記のすべての友人は、欠点について正しいです。しかし、<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';
}
0
Alireza