很好,我解释说,为了将一些样式应用于典型的 DOM 元素,我执行以下操作:
一些page.ts:
import { Component, OnInit, ElementRef, ViewChild} from '@angular/core';
//Dentro de la clase:
@ViewChild('profilePicture') profilePicture: ElementRef;
//Y para cambiarle algun estilo o propiedad a este elemento hago algo como:
profilePicture.nativeElement.style.color = "#000";
一些page.ts的HTML:
<ion-content>
<div [ngStyle]="{'background-image': 'url(' + image_data + ')'}"
#profilePicture class = "profile_picture">
<ion-content>
这很有效,因为它是一个 div,(一个 DOM 元素)......如果我试图引用的元素是 ionic 自己的呢?那就是:
<ion-card-content class = "animableCard" #cardContent>
//Mas elementos
</ion-card-content>
这是我访问元素的方式:
@ViewChild('cardContent') cardContent: ElementRef;
但问题是,通过这样做,元素不再具有 nativeElement 属性,所以我也无法访问元素的样式属性,那么如何从 page.ts 更改样式?我需要从那里开始,因为我需要一个函数来更改该元素的样式,以便在页面加载时立即执行。
我找到了一个很好的解决方案!,我在这里附上解决方案的原始来源:
https://github.com/Microsoft/TypeScript/issues/16920
简而言之,如果我想将样式应用于某些功能,我可以执行以下操作:
现在我有了一个HTML 元素的集合而不仅仅是元素,我可以遍历每个元素来设置它的样式: