2016-01-24 25 views
8

ルートコンポーネントとして<code><my-app></code>タグの代わりに<code><body></code>タグを使用すると、面倒なことに、my-appの代わりにbodyをルートセレクタとして使用します。

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

(ここでのコードはダーツがあるが、私はそれは、他の人が理解するためのtypescriptですES6に十分近いであると思います。)

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

答えて

2

フレームワークはまだ非常に新しく、私たちは本当にその答えを持っていません。つまり、技術的には、<body>をルート要素として使用すると壊れてしまうものはないと思っていますが、概念的には後でカスタムルート要素を使用するようになると思います。

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

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

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

さらなる考え:<html>をルート要素として使用するとどうなりますか?知るか。

2

2つのボディタグがない限り、何も起こりません。セレクタは、あなたのアプリに固有のものを反映しなければならない

ダウン:ので、まだ、それをしません。

+1

私は実際に下側が表示されません、あなたは説明できますか? – Kasper

4

アプリのためのセレクタとして「体」を使用している場合、それは動作しますが、いくつかの問題があります。

  • Webコンポーネントの仕様は、カスタムを使用するように言います要素またはカスタム属性と公式HTML要素は使用しません。

  • style guideは、「myComponent」のようなコンポーネントに「カスタムプレフィックス」を使用することを提案しています。また、チェックするために、 'component-selector-prefix'設定でtslintのようなlinterを使用したい場合は、 'body'セレクタをプレフィックスなしで使用する警告が表示されます。

  • セレクタ(本体)の中にいくつかの要素がある場合、それらは隠れて表示されます。本体や他のコンポーネントの中に 'スクリプト'を入れたい場合があります。例えば 'webpack'スクリプトが体の底にあり、おそらく動作しますが、期待通りには動作しません...

最高です。

+1

角度成分はカスタム要素ではありません。名前がWeb Components仕様( '-'を持つ)に準拠していても、Angular2ではあまり意味がない場合、小さな利点があります。プレフィックスはルートコンポーネントには関係ありません。これは、複数のコンポーネントライブラリが使用されているため、名前が「」の2つの異なるコンポーネントを持たない場合に、タグ名とCSSの競合を避けるためです。最後の項目は間違いなく有効です。 Angularは、ルートコンポーネントのセレクタが一致するタグの内容をプルーニングします。 –

関連する問題