angular - 如何在 DOM 中使用有限项定义 @input

Question

我想定义一种in文件@Input类型，用户只能选择其中一个枚举项。Enumts

@Component({
    selector: 'sale-tree',
    templateUrl: 'sale-tree.component.html',
    styleUrls: ['sale-tree.component.css'],
})
export class SaleTreeComponent {
    @Input() businessDataTable: BusinessDataTableType;

    constructor() {
    }

}

export enum BusinessDataTableType {
    Category,
    SalesRegion,
    Address
}

这是我的父组件：

<ng-template>
    <sale-tree [businessDataTable]="BusinessDataTableType.Address"</sale-tree>
</ng-template>

但是当我决定重视businessDataTable我面临的众多项目时，我只想看到这三个项目：

    Category
    SalesRegion
    Address

有没有办法将输入项目限制为这三个项目？

标签： angulartypescript

Answer 1

以下输出是我一直在寻找的：

@Component({
            selector: 'sale-tree',
            templateUrl: 'sale-tree.component.html',
            styleUrls: ['sale-tree.component.css'],
        })
        const DataTableType = {
            Address: 'Address' as 'Address',
            Category: 'Category' as 'Category',
            SalesRegion: 'SalesRegion' as 'SalesRegion'
        }
        type DataTableType= (typeof DataTableType)[keyof typeof DataTableType];
        export {DataTableType};

        export class SaleTreeComponent {
            @Input() selectedBusinessDataTable: DataTableType;
            @Output() nodeClick: EventEmitter<any> = new EventEmitter();

            constructor() {
            }

            btnNodeClick(event) {
                if (this.selectedBusinessDataTable === BusinessDataTableType.Address) {
                    // your code
                }
                this.nodeClick.emit(event.currentTarget.value);
            }
        }

        export enum BusinessDataTableType {
            Address = 'Address',
            Category = 'Category',
            SalesRegion = 'SalesRegion'

        }

通过像上面这样声明输入参数，在父组件中，当你想为selectedBusinessDataTable参数赋值时，你只会看到这三个项目：