角度タグが

-1

私は角2フレームワークで構築されているプロジェクトがあります。カスタム角度タグ（<my-app>、<my-whatever-component>など）は、CSS出力を妨げています。 HTMLが直接index.htmlファイルにある場合（いずれのコンポーネントにも含まれない）、CSSは正常にロードされます。角度タグが

私がデバッグしているとカスタム角度のタグが問題の原因である特定の結論になってきました。

私はこの動作を変更するにはどうしますか？ビューがレンダリングされた後にカスタムHtmlタグが消えるようにするにはどうすればいいですか？これにより、階層CSSルールが破損するのを防ぎます。

編集1：私はそれを微調整（私はしたくない以上のような）CSSは、カスタム（無料ブートストラップ管理テンプレートブツ）であるので、私はできません言及するのを忘れてしまいました。あなたは

selector: '[my-component]'

ようなあなたのコンポーネントに属性セレクタを使用することができます回避策として

出典

2016-11-10 omo_prodigi

DOMを見てください。それに一致するCSSを書きます。 – Quentin

@Quentin編集 –

を参照してくださいオリジナルを変更せずにCSSを微調整するだけで、コンポーネントのCSSファイルを作成してスタイルを上書きすることができ、すべてのコンポーネントのCSSファイルは他のコンポーネントにスタイルをリークさせません。 –

ビューカプセル化タイプを設定する必要が

、詳しい情報here

@Component({ 
    moduleId: module.id, 
    selector: 'my-zippy', 
    templateUrl: 'my-zippy.component.html', 
    styles: [` 
    .zippy { 
     background: green; 
    } 
    `], 
    encapsulation: ViewEncapsulation.None //No Shadow DOM at all. Therefore, also no style encapsulation. 
})

EDIT

とそれを好きなように使ってください

<div my-component>Hello My component</div>

この方法で、あなたのHTMLからコンポーネントタグをスキップすることができ、階層CSSを適用することができます。

出典

2016-11-10 10:33:30 Satendra

ありがとうございました。 View Encapsulationは、コンポーネントにのみスタイルルールを保持することと関係しています。私が本当に望むのは、カスタムタグ "< my-zippy >"が、ビューがレンダリングされた後にdissapearをソートすることです。これにより、階層CSSルールが破損するのを防ぎます。 –

@omo_prodigi私のEDITセクションをチェックしてください。これが役立つかもしれません。 – Satendra

あなたはplunckerまたは類似を通じての例を与えることができますか？ twitter bootstrap bootstrap.jsまたはUI Bootstrapを使用していますか？ストレート・アップ・ツイッター・ブートストラップを使用している場合は、javascriptで実装されているブートストラップ・コンポーネントを使用する際に問題が発生します。

希望すること

出典

2016-11-10 10:36:59 user3244591

答えて

関連する問題