类型检查组件

Question

我想将组件 class 作为输入传递给另一个组件：

@Component({selector: 'dummy-comp', template:'i am dummy'});
class Dummy {}

@Component({
  selector: 'not-so-dummy',
  template:'<ng-content *ngComponentOutlet="transcluded"></ng-content>'
})
class LessDummy {
  @Input() transcluded: ???
}

我应该使用什么类型来嵌入？ Dummy 不扩展任何东西，而是使用 @Component 装饰器。另一方面，是一种组件类型，它从指令扩展而来……这里是一些额外的测试：

let dummy = Dummy, component = Component;
typeof dummy // "function"
dummy.name // "Dummy"
typeof component // "function"
component.name // "DecoratorFactory"
dummy instanceof component // false

如果我理解正确，我可以使用 Function 作为我的 transcluded 输入的类型，但理想情况下我想缩小范围。也许我正在以错误的方式解决这个问题，但这是我想要实现的目标：

<div [ngSwitch]="getTypeOf(input)">
  <div *ngSwitchCase="'Component?'">
    <ng-content *ngComponentOutlet="input"></ng-content>
  </div>
  <span *ngSwitchCase="'string'">{{input}}</span>
  <span *ngSwitchCase="'function'">{{input()}}</span>
</div>

我完全不知道我的 getTypeOf 函数的逻辑是什么。

编辑：根据 this website:

The prototype of the original constructor is copied to the prototype of f to ensure that the instanceof operator works as expected when we create a new instance of Person.

这可以解释为什么 instanceof 不起作用。

edit2: Reflect 运气好:

 Reflect.getMetadata('annotations',dummy)[0].selector // "dummy-comp"

Answer 1

看起来这是可行的：

private getTypeOf(d:any): string {
  let type:string = typeof d;
  if (type === 'function') {
    let metaKeys:string = Reflect.getMetadataKeys(d);
    if (metaKeys.indexOf('annotations') > 0) {
      let annotations:string[] = Reflect.getMetadata('annotations', d);
      if (annotations.indexOf('@Component') > 0) {
        type = '@Component';
      }
    }
  }
  return type;
}

有关详细信息，请参阅 Reflect documentation。

请注意，这不适用于 Internet Explorer。

编辑 metadata 方法文档一夜之间从 MDN 网站神秘消失，你可以看看 this website 而不是

类型检查组件

Type checking components

typescript

transclusion

angular2-template

angular