巧用ngStyle改变样式

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

点击打开链接 

再把官网中的例子改改，这样使用者可以通过传入一组字符串动态的修改样式，适应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'"