Question

我们正在使用angular-flex-layout在我们的应用中进行尺寸调整。我们在应用中的多个位置使用了多个标记。例如，此块用于所有＆＃34;顶级＆＃34; 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 - 其他......

我认为这一定是一个相当普遍的问题。也许有一个盒子解决方案。

谢谢！

如何重用常见的AngularFlexLayout属性

0 个答案: