页面加载时的样式元素在离子2中

Question

我试图根据某些条件为我的图像进行样式，并在页面打开/加载时尝试显示它们。

design_on_const(){
    var cover1 = document.getElementById("cover1");
    var cover2 = document.getElementById("cover2");
    var cover3 = document.getElementById("cover3");
    var cover4 = document.getElementById("cover4");
    var cover5 = document.getElementById("cover5");
    cover3.style['visibility']="hidden";
    cover4.style['visibility']="hidden";
    cover5.style['visibility']="hidden";
    if (localStorage.getItem('gardirop_model') == 'surgulu' && localStorage.getItem('gardirop_size') == '132') {
        this.cover_1_prop.top = "0px";
        this.cover_1_prop.left = "14%";
           this.cover_1_prop.maxHeight = "98%"; 
  this.cover_2_prop.style['top'] = "0px";
  this.cover_2_prop.style['left'] = "51%";
  this.cover_2_prop.style['maxHeight'] = "98%";
    }
    if (localStorage.getItem('gardirop_model') == 'surgulu' && localStorage.getItem('gardirop_size') == '220') {
        cover1.style['top'] = "0px";
        cover1.style['left'] = "10%";
        cover1.style['maxHeight'] = "97%";
        cover2.style['left'] = "52%";
        cover2.style['maxHeight'] = "91%";
        cover2.style['top'] = "6px";
    }
    if (localStorage.getItem('gardirop_model') == 'menteseli' && localStorage.getItem('gardirop_size') == '132') {
        cover1.style['top'] = "-1%";
        cover1.style['left'] = "13%";
        cover1.style['maxHeight'] = "100%";
        cover2.style['top'] = "-1%";
        cover2.style['left'] = "50%";
        cover2.style['maxHeight'] = "100%";
    }
    //menteseli 220cm
    if (localStorage.getItem('gardirop_model') == 'menteseli' && localStorage.getItem('gardirop_size') == '220') {
        cover1.style['top'] = "0px";
        cover1.style['left'] = "8%";
        cover1.style['width'] = "20%";
        cover1.style['maxHeight'] = "98%";
        cover2.style['top'] = "-1%";
        cover2.style['left'] = "24%";
        cover2.style['maxHeight'] = "99%";
        cover2.style['width'] = "20%";
        cover3.style['visibility'] = "visible";
        cover4.style['visibility'] = "visible";
        cover5.style['visibility'] = "visible";
    }
    console.log("done!");
}

这是我的函数，它将值设置为元素，我称此功能为constructor，ionviewDidload，ngoninit，ngoninit，ionviewDidenter和其他生命周期事件中的 this.design_on_const();。它确实有效，"完成"了，但没有显示我的样式。本地存储值已在以前的页面中设置，因此，根据这些值，我必须在页面加载时在此页面中显示我的图像。但是，图像似乎没有我想要的。它们只是显示在页面上的随机显示，就像他们采用默认值一样。我该如何以最佳方式进行样式，或在哪里称呼我的功能？

这些是我在html中的图像：

<ion-col width-25>
    <div style="position: relative;display: inline-block;">
        <img class="gardirop" src="{{gardirop}}" style="width: 90%;" />
        <img id="cover1" class="cover_1" src="{{gardirop_cover_1}}" />
        <img id="cover2" class="cover_2" src="{{gardirop_cover_2}}" />
        <img id="cover3" class="cover_3" src="{{gardirop_cover_3}}" />
        <img id="cover4" class="cover_4" src="{{gardirop_cover_4}}" />
        <img id="cover5" class="cover_5" src="{{gardirop_cover_5}}" />
    </div>
</ion-col>

和我的.scss文件：

.gardirop {
    z-index: 1;
    position: relative;
}
.cover_1 {
    z-index: 10;
    position: absolute;
}
.cover_2 {
    z-index: 20;
    position: absolute;
    display: inline-block;
}
.cover_3 {
    z-index: 20;
    position: absolute;
    top:-4px;
    left:41%;
    max-height: 99%;
    display: inline-block;
    width: 20%;
}
.cover_4 {
    z-index: 20;
    position: absolute;
    top:6px;
    left:60%;
    max-height: 90%;
    display: inline-block;
}
.cover_5 {
    z-index: 20;
    position: absolute;
    top:7px;
    left:74%;
    max-height: 89%;
    display: inline-block;
    width: 16%;
}

编辑：变量定义

        export class KararPage {
    //here
    cover_1_prop:any={};
    cover_2_prop:any={};
    constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.design_on_const();
    } 
    design_on_const(){
      ...............}
       }

Answer 1

使用document.getElementById访问元素并直接更改DOM并不适用于Angular 2/ionic 2。就您而言，我认为Ngstyle可以轻松工作。创建包含您样式属性的对象：

    cover_1_prop:any={};//class variable
 //in your function
this.cover_1_prop.visibility='hidden';
        if (localStorage.getItem('gardirop_model') == 'surgulu' && localStorage.getItem('gardirop_size') == '132') {
        this.cover_1_prop.top = "0px";
        this.cover_1_prop.left = "14%";
        this.cover_1_prop.maxHeight = "98%";
        }

在HTML中，

<img id="cover1" class="cover_1" [ngStyle]="cover_1_prop" src="{{gardirop_cover_1}}" /> 

如果要设置CSS类或从组件中更新它，则可以使用ngclass。

样本plunker