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

Question

背景

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

代码

app组件（父级）

@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）。但是，style没有出现。我已经看过其他关于样式的帖子作为输入，但从我看到的这通常是通过传递样式 - 值对（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' }"