2017-01-20 12 views
1

私は2つのルートで 'SearchComponent'というコンポーネントを使用しています。最初のルートでは、コンポーネントは特定の方法でスタイルされています。たとえば、入力テキストが3つあり、display:blockです。他のルートでは、3つの入力テキストをインラインブロックにしたいと思います。ルートに基づいた角度2のコンポーネントのスタイル

質問は、ルーティングを使用してコンポーネントスタイルを条件付きで変更できますか? @Componentデコレータにいくつかの条件付きロジック機能があることを期待していましたが、私の読んだところでは不可能です。その場合、別のstyleUrlパスを使用することができます。

誰でも助けてもらえますか?

答えて

3

経路パラメータの使用を検討しましたか?あなたは、スタイリングのための条件としてルート内のいくつかの変数を使用することができます。例えば:ここ

https://fooServer/fooApp/#/main/YourComponent;type=search1 

変数typeは、などの文字列、ブール、可能性が..あなたは、前のコンポーネントからのルート変更の際に、それを設定します。

ngOnInit()の場合、this._route.snapshot.params['type'];を呼び出してルートパラメータの値を取得します。次に、テンプレートで、タグに[attr.class]="type == search1? search1Class : search2Class"

情報を追加します。ルートパラメータcan be found hereの情報は、「パラメータ付きのルート定義」ヘッダーにあります。 あなたの質問を誤解しているかどうか教えてください:)

+1

素晴らしいソース。完璧に動作します。ありがとうございました! – user875139

関連する問題