在 "setAttribute('fxFlex', '25%')" 中更改组件中的 fxFlex 值在 Angular 中不起作用 6

Question

我正在使用 flexLayout 模块（在 https://github.com/angular/flex-layout also in https://alligator.io/angular/flex-layout/ 中查看更多信息）在我的 Angular 应用程序中构建响应式 div，我想从我的 Angular 组件。 component.ts:

中的代码

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>

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

我正在使用 Angular 6 和 Typescript 3.1.1

拜托，如果有什么建议，请不要犹豫。

谢谢！

Answer 1

在angular中，需要使用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

the code should normally should change the size Layout to 5%

不应该。

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

当你写

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

你指示Javascript，它是从Typescript编译的（所以在post-build context) 以获取元素并向您的属性添加 Angular 指令。

问题是，代码已经编译好了，所以你不能将 typescript 添加到 Javascript，否则你将不得不重新编译它（我什至不确定你是否可以这样做） .

我建议您在使用前了解 angular 功能及其工作原理。此外，如果您希望有人提供适合您情况的解决方案，请考虑 posting a Minimal, Complete, and Verifiable example。

在 "setAttribute('fxFlex', '25%')" 中更改组件中的 fxFlex 值在 Angular 中不起作用 6

Changing fxFlex value in the Component with "setAttribute('fxFlex', '25%')" not Working in Angular 6

html

angular

typescript

frontend

angular-flex-layout