在 "setAttribute('fxFlex', '25%')" 中更改组件中的 fxFlex 值在 Angular 中不起作用 6
Changing fxFlex value in the Component with "setAttribute('fxFlex', '25%')" not Working in Angular 6
我正在使用 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
拜托,如果有什么建议,请不要犹豫。
谢谢!
在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%");
}
}
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。
我正在使用 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
拜托,如果有什么建议,请不要犹豫。
谢谢!
在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%");
}
}
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。