angular2: ElementRef получить атрибут атрибута CSS

Я изучаю объект ElementRef в Angular2 (Ionic2), и я не могу удержать атрибут CSS paddingElementRef.angular2: ElementRef получить атрибут атрибута CSS

Для следующего вопроса я не буду приводить подробные сведения о моих файлах: [мой проект] \ src \ app \ app.component.ts и [мой проект] \ src \ app \ app.module.ts. Предположите, что они работают правильно.

У меня есть этот код в компоненте под [мой проект] \ SRC \ страницы \ My-компонент \ My-component.ts:

import { Component, ContentChild, ViewChild, ElementRef } from '@angular/core'; 
import { NavController, Card, CardContent } from 'ionic-angular'; 

@Component({ 
    selector:'my-component', 
    templateUrl: 'my-component.html' 
}) 
export class MyComponentPage { 
    // @ContentChild("ionCard") ionCard:Card; 
    // @ContentChild("ionCardContent") ionCardContent:CardContent; 
    @ViewChild("ionCard") ionCard:ElementRef; 
    @ViewChild("ionCardContent") ionCardContent:ElementRef; 
    constructor(public navCtrl:NavController){ 

    } 
    ionViewWillEnter(){ 
     console.log("ionCard: ", ionCard); 
     console.log("ionCardContent: ", ionCardContent); 

    } 
}

Затем этот HTML шаблон в [мой проект] \ SRC \ страницы \ My-компонент \ My-component.html, у меня есть:

<ion-header> 
... 
</ion-header> 
<ion-content > 
    <ion-card #ionCard> 
    <ion-card-content #ionCardContent> 
    </ion-card-content > 
    </ion-card> 
</ion-content>

Когда я смотрю на журнал (присвоенный console.log в ionWillEnter()) для #ionCard и #ionCardContent: Оба из них посчастливилось иметь для ElementRef.nativeElement.clientWidth такое же значение. Вероятно, это хорошо, но я вижу в консоли Chrome Inspection (через вкладку «Стили»), что #IonCardContent имеет padding. И реальная ширина используемого пространства в <ion-card-content>: (ElementRef.nativeElement.clientWidth - padding). И я не могу найти, где это дополнение находится в атрибутах ElementRef.nativeElement.

Когда я смотрю ElementRef.nativeElement.style, все атрибуты имеют пустое строковое значение (среди них paddingLeft).

Я также пробовал с ContentChild (как вы можете видеть, эти строки прокомментированы в моем коде, и соответствующий импорт находится поверх файла). Поскольку <ion-card> и <ion-card-content> не являются стандартным синтаксисом DOM, я полагаю, стоит попробовать. Но в этом случае я получаю undefined в журнале.

Кто-нибудь знает, как достичь атрибута padding элемента ElementRef.nativeElement в Angular2?

источник

2016-12-09 nyluje

http://stackoverflow.com/questions/5227909/get-element-padding-value-using-javascript –

@ Günter Zöchbauer Хорошо, вы привели меня к решению: [window object] .getComputedStyle (ionCardContent.nativeElement, null) .paddingLeft); дает мне padding left (с суффиксом px). Вы хотите написать это как ответ? – nyluje

(Благодаря Günter Zöchbauer для этого).

Решение: [window object].getComputedStyle(ionCardContent.nativeElement,null).‌paddingLeft;

Это дает отступы слева с суффиксом рх.

Больше входных данных о getComputedStyle() функция в this thread.

источник

2016-12-10 10:17:40 nyluje

angular2: ElementRef получить атрибут атрибута CSS

ответ

Смежные вопросы