angular2: ElementRef 获取 CSS 填充属性

Question

我正在ElementRefAngular2 (Ionic2) 中探索对象，但我无法控制 .css 文件的paddingCSS 属性ElementRef。

对于以下问题，我不会提供我的文件的详细信息：[我的项目]\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);

    }
}

然后在 [我的项目]\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 的 padding 属性？

Answer 1

（感谢 Günter Zöchbauer 的这一点）。

解决办法是： [window object].getComputedStyle(ionCardContent.nativeElement,null).??paddingLeft;

它给出了带有 px 后缀的填充。

有关此线程中getComputedStyle()功能的更多输入。