时间戳

首页 > 解决方案 > 使用“setAttribute('fxFlex', '25%')”更改组件中的 fxFlex 值在 Angular 6 中不起作用

html - 使用“setAttribute('fxFlex', '25%')”更改组件中的 fxFlex 值在 Angular 6 中不起作用

问题描述

我正在使用 flexLayout 模块（在 https://github.com/angular/flex-layout 中查看更多信息，也在https://alligator.io/angular/flex-layout/ 中）在我的 Angular 应用程序中构建响应式 div，我想从我的 Angular 组件中设置 fxFlex 属性的值。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

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

谢谢你 ！

标签： htmlangulartypescriptfrontendangular-flex-layout

解决方案

代码通常应该将大小布局更改为 5%

不，不应该。

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

当你写

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

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

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

我建议您在使用之前了解角度特征及其工作原理。此外，如果您希望有人提供适合您案例的解决方案，请考虑发布一个最小、完整和可验证的示例。

推荐阅读