html - 在 ionic 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!");
}

这是我的函数，它为元素设置值，我在构造函数、ionViewDidLoad、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 .

Sample Plunker