css - Angular 2 : ElementRef get CSS padding attribute

Question

我正在探索 Angular2 (Ionic2) 中的 ElementRef 对象，但我无法获取 padding 的 ElementRef CSS 属性。

对于下面的问题，我不会给出我的文件的详细信息:[我的元素]\src\app\app.component.ts 和 [我的元素]\src\app\app.module.ts。请假设这些工作正常。

我在 [my project]\src\pages\my-component\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);

    }
}

然后在 [my project]\src\pages\my-component\my-component.html 中的这个 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 检查控制台(通过样式选项卡)中看到 #IonCardContent 有一个 padding 。而 <ion-card-content> 中真正可用的空间宽度是:( ElementRef.nativeElement.clientWidth - padding )。而且我找不到这个填充在 ElementRef.nativeElement 属性中的位置。

当我查看 ElementRef.nativeElement.style 时，所有属性都有一个空字符串值(其中 paddingLeft )。

我也尝试过使用 ContentChild(如您所见，这些行在我的代码中已被注释，相应的导入位于文件顶部)。由于 <ion-card> 和 <ion-card-content> 不是标准的 DOM 语法，我认为值得一试。但在那种情况下，我在日志中得到一个 undefined。

有人知道如何在 Angular2 中获取 ElementRef.nativeElement 的填充属性吗？

Answer 1

(这要感谢 Günter Zöchbauer)。

解决方案是:[window object].getComputedStyle(ionCardContent.nativeElement,null).‌ paddingLeft;

它给左边的填充加上 px 后缀。

关于 getComputedStyle() 函数的更多输入 this thread .