Изменение значения fxFlex в компоненте с помощью «setAttribute ('fxFlex', '25% ')" не работает в Angular 6 - PullRequest
0 голосов
/ 05 марта 2019

Я использую модуль flexLayout (см. Больше в https://github.com/angular/flex-layout также в https://alligator.io/angular/flex-layout/) для создания отзывчивого div в моем приложении Angular, и я хочу установить значение атрибута fxFlex из моего Angular Component.код в 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

Пожалуйста, если есть какие-либо предложения, не стесняйтесь.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 05 марта 2019

код должен обычно менять размер макета на 5%

Нет, не должен.

Угловые директивы используются в Typescript или в контексте предварительной сборки .

Когда вы пишете

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

Вы указываете Javascript , который был скомпилирован из Typescript (то есть в post-создайте контекст ), чтобы получить элемент и добавьте директиву Angular к своему атрибуту.

Дело в том, что код уже скомпилирован, поэтому вы не можете добавить машинописный текст в Javascript, иначе вам придется скомпилировать его снова (и я даже не уверен, что вы сможете это сделать).

Предлагаю вам узнать об угловых элементах и ​​о том, как они работают, прежде чем их использовать.Кроме того, рассмотрите возможность публикации Минимальный, Полный и Проверяемый пример , если вы хотите, чтобы кто-то предложил решение, адаптированное к вашему случаю.

0 голосов
/ 05 марта 2019

В angular вам необходимо использовать рендерер2 для динамической установки атрибута.

Пример:

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%");
    }

}
...