Angular2アプリケーションで画面サイズの変化に応じて3つの円に反応する方法は？

Question

私は3つのサークルを持っているdivを持っています（データはAPIから来ているので* ngForを使用しています）。これらの3つのサークルをインラインにし、ブートストラップのみを使用して画面サイズを変更することで対応します。私はメディアクエリの使用を避けたい。ここで

は私のHTMLコードです： - ここに

<div class="container-fluid non_circleRowCss "> 
    <div class="row" > 
     <div class="col-lg-1 col-md-1 col-xs-12"> </div>  
     <div *ngFor = "let OverviewQuestionText of career_Results.OverviewQuestionText; let i = index " class="col-lg-2 col-sm-2 col-md-2 col-xs-12 non_circleCSS "[style.backgroundColor] = colorsArray[i]> 
      <div class="text01"> 
       {{OverviewQuestionText.OverviewQuestion }} 
      </div>                    
     </div> 
     <div class="col-lg-1 col-md-1 col-xs-12"> </div>   
    </div> 
</div> 

は私が円を作成するには、列のいずれかに使用CSSです：

.non_circleCSS { 
    min-width: 253px; 
    min-height: 253px; 
    border-radius: 50%; 
    margin-right: 122px; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    display: table; 
} 

Answer 1

あなたは指令

import { Directive, ElementRef, Input } from '@angular/core'; 
@Directive({ selector: '[myHighlight]' }) 
export class makeMyDivAPerfectAndResponsiveCircle{ 
    constructor(el: ElementRef) { 
     let myWinSize=document.width; 
     el.nativeElement.style.width= myWinSize; 
     //...Etc to make a circle 
    } 
} 

を使用することができます

文書を挿入したり、別の方法で「幅」を取得する必要があるかもしれません。

https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#write-directive