巧用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'"