javascript - 跨组件实现参数值限制

Question

我有多个组件，我想将其参数限制为特定值。例如(在伪代码中):

class MyFirstComponent {
    @Input() myParameter: 'foo'|'bar'|'baz';
}

class MySecondComponent {
    @Input() myParameter: 'foo'|'bar'|'baz';
}

在这两个组件中，@Input() myParameter 应该只接受相同的限制值。我不想在每个组件中复制允许的值，而是想抽象出限制。我该怎么做？我假设它需要 enums 或 interface 但我不知道如何实现这两种方法。

Answer 1

你可以使用类型。在某个地方定义它，也许是一个单独的文件，然后将其导出。这更像是 TypeScript 而不是 Angular。

export type MyType = 'foo' | 'bar' | 'baz'

然后将其导入到您要使用它的文件中。

import {MyType} from './path/to/file'

并使用新创建的类型:

@Input() myParameter: MyType