web-dev-qa-db-ja.com

flexbox with angular 2コンポーネント

angular 2アプリケーションのビジュアルサイド（グリッド、カラー）を更新したい。古いレイアウトはbootstrap 4でビルドされたが、実際には必要ないもう。プレーンなcss3を選び、flexboxでグリッドを構築することにしました。 このグリッドのプレビューをcodepenで作成しました 。

しかし、プロジェクトでの実装は難しく、今は行き詰まっています。例を考えてみましょう：

import {Component} from 'angular2/angular2';


@Component({
  selector: 'some-component',
  template: `
    <aside class="col-4 main-aside"></aside>
    <section class="main-section center"></section>
  `
})
export class SomeComponent { }

I bootstrapこのコンポーネント内、たとえば.container私はこの結果を得るかもしれません：

<body>
  <!-- .container is flex parent -->
  <div class="container">
    <some-component>
      <!-- .main-aside and .main-section should be flex children -->
      <aside class="main-aside"></aside>
      <section class="main-section center"></section>
    </some-component>
  </div>
</body>

ご覧のとおり、フレックスチェーンの親->子は、それらの間のコンポーネント「セレクター」のために壊れています。私はスタイルを追加することでこれを修正するように管理しました：display: flex; width: 100%; chrome開発ツールからコンポーネントセレクターへ。ただし、コードの観点からこれを機能させる方法がわかりません。また、これを行うための最良の方法でもありません。

フレックスボックスを使用しないことを除いて、これを修正する方法がわからないので、私は本当に助けていただければ幸いです。

私はangular 2.0.0-alpha.44を使用しています

そして、はい、私はAngularのアルファ状態を知っています。

javascriptcssflexboxangular
14
Eggy

コンポーネントにスタイルを追加することで、この問題を修正しました。例えば：

:Host {
  display: flex;
}

:Host {}が鍵でした。

35
Eggy

angularチームは独自のflex-layoutパッケージをリリースしたので、もう自分で書く必要はありません。

https://github.com/angular/flex-layout

1
Philip Miglinci

:Hostセレクターは問題を解決しますが、多くのコンポーネントで頻繁に使用しなくなります。

代わりに、次のグローバルCSSを使用しました。

.row > * {
  display: flex;
  flex-basis: 100%;
}
1
Jiayi Hu