0

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

动态控制.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';
}

主要组件.html

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

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

[类]='btn 两个'

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

这是stackblitz链接

4

3 回答 3

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

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

除此以外 ：

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

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

于 2019-06-19T09:00:41.483 回答
2

您可以使用 [ngClass] 

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

注意：表达式如：真/假、2>1 等。

记住：删除 {expression} 的 {}

于 2019-06-19T09:07:57.383 回答
0

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

[class]="'btn two'".

值得一提的是，由于您选择将输入命名为“类”，因此您以后可能会遇到 Angular 将值作为输入参数传入并将值作为类应用到父元素的问题。

于 2019-06-19T09:03:13.817 回答