无法在Angular6的Input属性中提供空格作为值

Question

我正在尝试创建这样的通用控件

动态控制

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

@Component({
  selector: 'ngo-button',
  template: `<button [ngClass]=class type={{type}}>{{message}}</button>`,
  styles: [`.one{border:solid 2px yellow} .two{background-color:pink} .three{
  background-color: blue;
}`]
})
export class HelloComponent  {
   @Input() type: string = 'button';
  @Input() class: string = 'one three';
  @Input() message: string = 'submit';
}

main-component.html

<ngo-button [class]='btn two' (click)='somefunc()'></ngo-button>

现在我想将两个类传递给按钮，但是当我试图以这种方式传递它时，我得到了错误

[class] ='btn two'

我想，我们不允许在输入参数中添加空间，还有另一种实现方法吗？

这是stackblitz链接

Answer 1

<ngo-button [class]="'btn two'" (click)='somefunc()'></ngo-button>

Angular的默认语法。如果使用[input]符号，则必须在引号中提供一个字符串。

除此以外 ：

<ngo-button class="btn two" (click)='somefunc()'></ngo-button>

尽管我不得不说，但它真的不明白为什么您使用输入来提供组件的类。