Angular2 CSS 样式/类字符串作为组件的输入

Question

背景

我有一个包含两个span 元素的组件。我希望父组件能够通过将 CSS 类和样式指定为输入（最好是简单的字符串）来设置内部两个 spans 的样式。这是我希望它看起来像的简化示例：

代码

应用组件（父级）

@Component({
  selector: 'my-app',
  template: `
    <div>
      <app-two-spans [classArg1]="'class1'" [classArg2]="'class2'"
                     [styleArg1]="'width: 100px'" [styleArg2]="'width:200px'"></app-two-spans>
    </div>
  `, style: `
    ::ng-deep .class1 {
      border: 1px solid black;
    }
    ::ng-deep .class2 {
      border: 1px solid blue;
    }
  `
})
export class App {

}

两个跨度组件（子）

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
    selector: 'app-two-spans',
    template: `
        <span *ngIf="flag" [ngClass]="classArg1" [ngStyle]="styleArg1" 
              (click)="flag = !flag">click me</span>
        <span *ngIf="!flag" [ngClass]="classArg2" [ngStyle]="styleArg2" 
              (blur)="flag = !flag" contenteditable="true">
              click me to change my value</span> 
    `
})
export class TwoSpansComponent {
  flag: boolean = true;
  @Input() styleArg1: string;
  @Input() styleArg2: string;
  @Input() classArg1: string;
  @Input() classArg2: string;
  constructor() {}
}

问题

类样式似乎适用于我的本地环境（尽管由于某种原因它似乎不适用于 Plunker）。但是，styles 没有出现。我看过其他关于样式作为输入的帖子，但据我所知，这通常是通过传递样式-值对 (see accepted answer here) 来完成的。但是，我真的很想将这些样式作为一个简单的字符串传递，以便更轻松地使用组件。 我在控制台中注意到以下错误：ERROR Error: Cannot find a differ supporting object 'width: 100px'。我完全不确定这意味着什么。

Plunker here

有没有办法做到这一点？如何赋予父组件样式化子组件的能力？

Answer 1

ngStyle 接受 Object 而不是纯字符串。您可以将样式传递为：

[styleArg1]="{ width: '100px' }"
[styleArg2]="{ width: '200px' }"