无法在 Angular6 的输入属性中将 space 作为值

Question

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

动态-control.ts

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';
}

主要-component.html

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

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

[class]='btn two'

我想，我们不允许在输入参数中添加space，还有其他方法可以实现吗？

this is the stackblitz link

Answer 1

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

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

否则：

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

虽然我不得不说，但它真的不明白你为什么要使用输入来提供你组件的类。

Answer 2

如果您在 Angular 中使用方括号 []，您是在告诉 Angular 编译器后面是要解析的表达式。由于 btn two 不是有效表达式，因此您会收到解析错误。你真正想做的是：

[class]="'btn two'".

值得一提的是，因为您已选择将输入命名为 'class,'，您以后可能会遇到问题 Angular 都将您的值作为输入参数传递和将值作为 class 应用到父元素。

Answer 3

你可以使用[ngClass]

<ngo-button [ngClass]="{'first class':{expression},'second class':{expression}}" (click)='somefunc()'></ngo-button>

N.B: 表达式如：true/false、2>1 等

记住 : 移除{}的{}表达式}

无法在 Angular6 的输入属性中将 space 作为值

Not able to give space as a value in the Input property in Angular6

angular

angular6

angular-input

无法在 Angular6 的输入 属性 中将 space 作为值

Not able to give space as a value in the Input property in Angular6

angular

angular6

angular-input

无法在 Angular6 的输入属性中将 space 作为值