angular - 将枚举项传递给模板中的子组件

Question

我尝试将枚举项传递给子组件：

 <app-enum-selection  [itemIgnore]=DataStatus.Coming_Soon ></app-enum-selection>

但我得到这个错误：

 error TS2339: Property 'DataStatus' does not exist on type 'ConstructorComponent'.

  <app-enum-selection [itemIgnore]=DataStatus.Coming_Soon></app-enum-selection>
                                                                                                                       
  src/app/constructor/constructor.component.ts:29:16
   templateUrl: './constructor.component.html',
                    
    Error occurs in the template of component ConstructorComponent.

知道为什么我会出错吗？以及如何将枚举项传递给子组件？

标签： angular

Answer 1

试试这样：

父组件：

enum DataStatus{
    Coming_Soon,
    ...
}

export class ParentComponent {
    public dataStatus = DataStatus;        
}

子组件：

export class ChildComponent {       
    @Input() public set itemIgnore(value: any) {
        console.log(value);
    };
}

父组件模板：

您app-enum-selection在父组件（假设）中的子组件选择器（假设ConstructorComponent）将如下所示：

<app-enum-selection [itemIgnore]=dataStatus.Coming_Soon ></app-enum-selection>

子组件模板：

<div>{{itemIgnore}}</div>