巧用ngStyle改变样式

来源：互联网发布：从ubuntu启动windows 编辑：程序博客网时间：2024/04/30 23:29

过来了一个需求，要求我之前写的搜索框的控件，要能适用不同的界面布局，刚好看到了一篇文章~官网里面的模板语法

点击打开链接

再把官网中的例子改改，这样使用者可以通过传入一组字符串动态的修改样式，适应UX的各种不同要求

setStyle() {    if (this.customStyle === '') {      return;    } else {      return JSON.parse(this.ChangeStringToStandard(this.customStyle));    }  }

 //width:50px,height:50px  ==> "{"width":" 50px","height":"50px"}"  ChangeStringToStandard(inputStr:string):string {    let inputString = '';    if (inputStr[(inputStr.length) - 1] === ';') {      inputString = inputStr.substring(0, (inputStr.length) - 1);    } else {      inputString = inputStr;    }    let localArrayOfStyle:string = '';    localArrayOfStyle += '{';    localArrayOfStyle += '"';    for (let value of inputString) {      if (value !== ':' && value !== ';') {        localArrayOfStyle += value;      } else if (value === ';') {        localArrayOfStyle += '"';        localArrayOfStyle += ',';        localArrayOfStyle += '"';      } else if (value === ':') {        localArrayOfStyle += '"';        localArrayOfStyle += value;        localArrayOfStyle += '"';      }    }    localArrayOfStyle += '"';    localArrayOfStyle += '}';    return localArrayOfStyle;  }

使用的时候

定义 @Input() customStyle:string = '';并可以传入一组string作为要用的style

[customStyle]="'width:200px;height:30px;margin-right:20px'"

0 0