2

我们正在使用angular-flex-layout在我们的应用程序中进行大小调整。我们在应用程序的多个位置使用了多个标签。例如，此块用于所有“顶级”div。 

<div ...
     fxFlex="900px"
     fxFlex.lt-md="90%"
     ... >

我试图弄清楚如何改变它，这样如果我们以后想重构，我们只需要改变一个地方。

我考虑过的选项：

选项 #1 - 不要为此使用 fxFlex

也许这是一个不适用于 fxFlex 的用例。我想我可以这样做：

<div ...
     class="mainWidthApp"
     ... >

然后我可以使用媒体查询编写 CSS 来处理多个页面宽度。呸。真的不想这样做。

选项 #2 - 使用 fxFlex 并创建一个新指令

这允许我们做这样的事情：

<div ...
     jakeAppWidth
     ... >

然后我们可以定义一个指令来做这样的事情：

import { Directive, ElementRef } from '@angular/core';

@Directive({
    selector: '[jakeAppWidth]'
})
export class AppWidthDirective {

    constructor(element: ElementRef) {

        // Not sure how to do this yet, but do something like: 
        element.addSubDirective( fxFlex="900px" );
        element.addSubDirective( fxFlex.lt-md="90%" );

    }

}

不确定是否有可能添加指令。还在研究这个。

选项 #3 - 其他...

我认为这一定是一个相当普遍的问题。也许有一个开箱即用的解决方案。

谢谢！

4

0 回答 0