Question

我正在使用flexLayout模块（请参见https://github.com/angular/flex-layout和https://alligator.io/angular/flex-layout/中的更多内容）在Angular应用程序中构建响应div，我想从Angular Component中设置fxFlex属性的值。组件中的代码：

const nav = document.getElementById('nav2'); nav.setAttribute('fxFlex', '5%');

html页面中的

代码：

<div fxLayout>
<div id="nav2" fxFlex="25%" class="col-md-2.5 bg-white p-1">hello</div>
<div id="nav1">word</div></div>

代码通常应将Layout的大小更改为5％，但事实并非如此，当我检查页面时，我发现属性已更改，但布局仍然相同，当我更改它时在html代码中手动将其设置为5％，我会得到想要的结果。

我正在使用Angular 6和Typescript 3.1.1

请，如果有任何建议，请不要犹豫。

谢谢！

Answer 1

在角度模式下，您需要使用renderer2来动态设置属性。

示例：

HTML

<div #myDiv id="nav2" fxFlex="25%" class="col-md-2.5 bg-white p-1"></div>

component.ts

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

...

export class MyComponent implements AfterViewInit {

    @ViewChild('myDiv') el:ElementRef; // get the refernce of dom element.

    constructor(private rd: Renderer2) {}

    ngAfterViewInit() {
        // Update dom after view initialized.
        this.renderer2.setAttribute(this.el.nativeElement, "fxFlex", "5%");
    }

}

Answer 2

代码通常应将Layout的大小更改为5％

不，不应该。

Angular指令用于 Typescript 或预构建上下文中。

撰写时

document.getElementById('nav2'); nav.setAttribute('fxFlex', '5%')

您指示 Javascript （已从Typescript 进行编译）（因此在构建后上下文中）以获取元素并添加属性的 Angular指令。

问题是，代码已经被编译，因此您不能在Javascript中添加打字稿，否则您将不得不再次对其进行编译（而且我什至不确定您是否可以这样做）。

我建议您在使用之前先了解角度特征及其工作原理。另外，如果您希望某人提供适合您情况的解决方案，请考虑发布Minimal, Complete, and Verifiable example。

使用“ setAttribute（'fxFlex'，'25％'）”更改组件中的fxFlex值不适用于Angular 6

2 个答案: