Динамическое обновление CSS в Angular 2

Допустим, у меня есть компонент Angular2

//home.component.ts

import { Component } from 'angular2/core';

@Component({
    selector: "home",
    templateUrl: "app/components/templates/home.component.html",
    styleUrls: ["app/components/styles/home.component.css"]
})
export class HomeComponent {
    public width: Number;
    public height: Number;
} 

HTML-файл шаблона для этого компонента

//home.component.html

<div class="home-component">Some stuff in this div</div>

И, наконец, файл CSS для этого компонента

//home.component.css

.home-component{
    background-color: red;
    width: 50px;
    height: 50px;
}

Как вы можете видеть, в классе есть 2 свойства: width и height. Мне бы хотелось, чтобы стили css для width и height соответствовали значениям свойств width и height, а когда обновляются свойства, обновляются ширина и высота div. Как правильно это сделать?

73 голоса | спросил tt9 9 MaramWed, 09 Mar 2016 07:05:12 +03002016-03-09T07:05:12+03:0007 2016, 07:05:12

9 ответов


0

Попробуйте это

 <div class="home-component" 
 [style.width.px]="width" 
 [style.height.px]="height">Some stuff in this div</div>

[Обновлено]: Для установки в% используйте

[style.height.%]="height">Some stuff in this div</div>
ответил Gaurav Mukherjee 9 MaramWed, 09 Mar 2016 11:32:57 +03002016-03-09T11:32:57+03:0011 2016, 11:32:57
0

Чтобы использовать% вместо px или em с ответом @ Gaurav, это просто

<div class="home-component" [style.width.%]="80" [style.height.%]="95">
Some stuff in this div</div>
ответил Helen 13 FebruaryEurope/MoscowbMon, 13 Feb 2017 04:44:00 +0300000000amMon, 13 Feb 2017 04:44:00 +030017 2017, 04:44:00
0

Это должно сделать это:

<div class="home-component" 
     [style.width]="width + 'px'" 
     [style.height]="height + 'px'">Some stuff in this div</div>
ответил Sasxa 9 MaramWed, 09 Mar 2016 07:09:41 +03002016-03-09T07:09:41+03:0007 2016, 07:09:41
0

Вы также можете использовать привязку хоста:

import { HostBinding } from '@angular/core';

export class HomeComponent {
    @HostBinding('style.width') width: Number;
    @HostBinding('style.height') height: Number;
} 

Теперь, когда вы изменяете свойство width или height из HomeComponent, это должно влиять на атрибуты стиля.

ответил 11mb 25 52016vEurope/Moscow11bEurope/MoscowFri, 25 Nov 2016 18:46:25 +0300 2016, 18:46:25
0

ответил micronyks 9 MaramWed, 09 Mar 2016 08:23:11 +03002016-03-09T08:23:11+03:0008 2016, 08:23:11
0

Все вышеприведенные ответы великолепны. Но если вы пытаетесь найти решение, которое не изменит html-файлы, приведенные ниже, будет полезно

 ngAfterViewChecked(){
    this.renderer.setElementStyle(targetItem.nativeElement, 'height', textHeight+"px");
}

Вы можете импортировать средство визуализации из import {Renderer} from '@angular/core';

ответил WenhaoWu 23 FebruaryEurope/MoscowbThu, 23 Feb 2017 14:05:19 +0300000000pmThu, 23 Feb 2017 14:05:19 +030017 2017, 14:05:19
0

Принятый ответ не является правильным.

Для сгруппированных стилей можно также использовать директиву ngStyle.

<some-element [ngStyle]="{'font-style': styleExpression, 'font-weight': 12}">...</some-element>

Официальные документы здесь

.
ответил JoshuaTree 13 AMpFri, 13 Apr 2018 10:58:22 +030058Friday 2018, 10:58:22
0

Если вы хотите динамически устанавливать ширину с переменной, используйте вместо этого [] фигурные скобки {{}}:

 <div [style.width.px]="[widthVal]"  [style.height.px]="[heightVal]"></div>

 <div [style.width.%]="[widthVal]"  [style.height.%]="[heightVal]"></div>
ответил Govind Samrow 1 42018vEurope/Moscow11bEurope/MoscowThu, 01 Nov 2018 08:54:14 +0300 2018, 08:54:14
0

Мне понравился внешний вид идеи WenhaoWuI выше, но мне нужно было идентифицировать div с class .ui-tree в компоненте дерева PrimeNG для динамической установки высоты. Все ответы, которые я мог найти, требовали, чтобы div был назван (то есть #treediv), чтобы разрешить использование @ViewChild(), @ViewChildren(), @ContentChild(), @ContentChilden() и т. Д. Это было грязно со сторонним компонентом.

Я наконец нашел фрагмент из Гюнтера Цохбауэр :

ngAfterViewInit() {
  this.elRef.nativeElement.querySelector('.myClass');
}

Это стало проще:

@Input() height: number;
treeheight: number = 400; //default value

constructor(private renderer: Renderer2, private elRef: ElementRef) {  }

ngOnInit() {
    this.loading = true;
    if (this.height != null) {
        this.treeheight = this.height;
    }   
}

ngAfterViewInit() {
    this.renderer.setStyle(this.elRef.nativeElement.querySelector('.ui-tree'), 'height', this.treeheight + "px");
}
ответил davaus 22 ndEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 22 Sep 2017 04:57:34 +0300 2017, 04:57:34

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132