Как изменить размер элемента DOM во время выполнения

Question

В проекте Angular 2 я пытаюсь изменить размер элемента DOM, который я извлекаю по id. Я установил размер, как указано ниже, и я не вижу никаких изменений. Какой шаг мне не хватает?

 document.getElementById('my_grid').setAttribute("style","height:600px"); 

Answer 1

Вам необходимо установить высоту в <div>. Ваш браузер не будет интерпретировать атрибут height в директиве «Угловая».

Кроме того, предпочтительный способ доступа к элементам в DOM осуществляется с помощью декоратора @ViewChild. См. accessing native elements in angular2

Answer 2

Не используйте это. Вы можете использовать угловую функцию.

1. Вы можете использовать [style.height.px]="modelvalue"
2. Второй путь, вы можете использовать <div #mydiv> в HTML и использовать @ViewChild в компоненте

Пример

@ViewChild mydiv; 

resizeDiv() { 
    this.mydiv.nativeElement... 
} 

Answer 3

В угловом 2 по возможности не использовать Ядро JavaScript или Код jquery для управления элементом dom. Сначала попробуйте сделать угловые 2 функции.

Мы можем использовать [style.height.px]="height" и всякий раз, когда вы хотите изменить Диву высоту изменения значения высоты от компонента