如何在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