Question

我正在寻找有关如何构建我的第一个Angular2应用程序的一些建议。

我一直在玩，并做了一些小概念，以了解它是如何工作的，现在想检查我采取了正确的方法，因为我认为可能有更好的方法来实现我想要的

项目：

我正在建立一个仪表板，它将包含填满屏幕的瓷砖/小部件。每个人都会在某个主题上显示不同的信息每个小部件还将具有三种状态/大小：小型，中型和小型;大。每个小部件将根据其大小显示不同数量的信息。

EXG。如果小部件显示时间，它可能会这样工作：

小：以小字体显示时间。
中：以大字体显示时间。
大：以小格式显示大格式和其他几个时区的时间。

所有小部件都将以中等方式启动。单击任何小部件将使其变大并且每个其他小部件变小。单击一个大小部件将使所有小部件再次处于中等状态。

我的方法：

我已经构建了一个app.component，每个小部件包含1个div，以及一些可以加载的示例小部件。我想将所有内容分开并尽可能模块化，所以我计划app.component将处理根据屏幕大小和小部件数量定位，移动和调整div的大小。因此，我打算使用漂亮的前端来处理div的位置。然后它还会告诉每个小部件它们应该是小型，中型还是大型。

小部件将负责显示正确数量的信息。

这是我遇到麻烦的地方 - app.component将宽度设置为百分比 - 目前为20％，50％和80％。我希望窗口小部件的内容基于其div的宽度显示，包括窗口大小的变化，但我无法传递宽度，因为app.component不知道它（它只将宽度设置为a％）。

我想出了什么作品，但我确信有更好的方法......

app.template.html：

<div class="widget-container" (click)="onClick1($event);" [style.width]="widget1Width + '%'"><widget-1></widget-1></div>
<div class="widget-container" (click)="onClick2($event);" [style.width]="widget2Width + '%'"><widget-2></widget-2></div>
<div class="widget-container" (click)="onClick3($event);" [style.width]="widget3Width + '%'"><widget-3></widget-3></div>

app.component.ts：

public widget1Width=50;
public widget2Width=50;
public widget3Width=50;
@ViewChild(Widget1Component) widget1: Widget1Component;
@ViewChild(Widget2Component) widget2: Widget2Component;
@ViewChild(Widget3Component) widget3: Widget3Component;

onClick1(value:any) {                                                                                                                                                                              
    this.widget1Width=80;
    this.widget2Width=20;
    this.widget3Width=20;
    this.widget1.parentResize(this.widget1Width);
    this.widget2.parentResize(this.widget2Width);
    this.widget3.parentResize(this.widget3Width);
}

widget1.component.ts：

export class WidgetWeatherComponent {                                                                                                                                
    panelLarge = 0;
    public widgetWidth:any;
    parentResize(value:any) {
        console.log(value);                                                                                                                                                                          
        this.widgetWidth=value;                                                                                                                                                                      
    }                                                                                                                                                                                                    
}

widget1.template.html：

<div #widget1ParentDiv>
    <div *ngIf="widget1ParentDiv.clientWidth>=700"> ... </div>
    <div *ngIf="widget1ParentDiv.clientWidth>=300 && widget1ParentDiv.clientWidth<700"> ... </div>
    <div *ngIf="widget1ParentDiv.clientWidth<300"> ... </div>
</div>

我知道如果我要更改文本格式等，我也可以更改类并使用CSS。

虽然我很乐意就安排，调整大小，前端的东西提出建议，但我主要关注的是为小部件设计正确的方法，以便我可以继续构建其中的一些。在app.component.ts中调整大小的代码只是为了让事情发生变化。

问题

我主要担心的是访问widget1ParentDiv.clientWidth接缝非常糟糕！通常情况下，我会使用@media处理css中的屏幕尺寸更改，但由于每个窗口小部件都有3个状态/尺寸＆＃39; （小，中，大）会造成太多的努力。我真的想要完全像@media，但对于父div。我已经读到了一点，但我的理解是，它并不是真的存在于开箱即用。

我对这种方法感到沮丧的是，我必须不断重复*ngIf="widget1ParentDiv.clientWidth>400"，我宁愿在其他地方定义并使用*ngIf="large"，但我无法看到如何做到这一点而无需回复屏幕大小更改并更新变量。

如果这没有意义或需要更多信息，请告诉我。任何建议/想法将不胜感激。

Angular2响应div大小

0 个答案: