如何在Angular2應用程序中使三個圓圈響應屏幕尺寸的變化？

Question

我有一個div，其中有三個圓圈（我使用* ngFor，因為數據來自API）。 我希望這三個圓圈是內聯的，並且僅使用引導程序就能響應屏幕尺寸的變化。 我想避免使用媒體查詢。

這是我的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