Question

子组件模板（子组件）：

<div [ngClass]="{ 'default': !inputCssClass, inputCssClass: inputCssClass }"></div>

<div [ngClass]="{ 'default': !inputCssClass, {{inputCssClass}}: inputCssClass }"></div>

<div [ngClass]="{ 'default': !inputCssClass, '{{inputCssClass}}': inputCssClass }"></div>

以上所有都给我解析器错误。上述代码背后的想法是： inputCssClass是Component的Input属性。

父组件可以定义自己的类并将其作为输入传递。例如：

父组件可以将其类定义为：

div.error{
       color:red;
   }
div.success {
    color:green;
}

而不是必须定义子组件中的所有类，父组件可以定义它们自己的类，并将类名传递给子组件。

<child-component inputCssClass="'error'"></child-component>

Answer 1

Sheet2

或

=IFERROR(INDEX(Sheet2!$C$2:$C$31, MATCH(0, COUNTIF(B$1:B1,Sheet2!$C$2:$C$31)+IF(Sheet2!$B$2:$B$31<>B$1, 1, 0), 0)), 0)

子模板中的

：

`<child-component inputCssClass="error"></child-component>`

Answer 2

如果要将数据传递给子组件，则应在子组件ts文件中使用@Input装饰器，并从inputCssClass="'error'"更改为[inputCssClass]="'error"。所以在你的情况下，它看起来像：

父HTML文件

<child-component [inputCssClass]="'error'"></child-component>

子组件ts文件

import { Component, Input } from '@angular/core';
@Component({
    selector: 'child-component', 
    templateUrl: './child-component.html
})
export class ChildComponent {
   constructor() { }
   @Input() inputCssClass;
}

具有运行时类

2 个答案: