如何将泛型类型参数传递给Angular2组件?

Tho*_*der 15 angular2-template angular

假设我有一个具有固定输入参数类型的组件,

@Component({
    selector: 'fixed',
    template: '<div>{{value}}</div>'
})
export class FixedComponent {
    @Input() value: string;
}
Run Code Online (Sandbox Code Playgroud)

我如何将该参数类型设为通用,即

@Component({
    selector: 'generic',
    template: '<div>{{value}}</div>'
})
export class GenericComponent<T> {
    @Input() value: T;
}
Run Code Online (Sandbox Code Playgroud)

也就是说,如何在父组件的模板中传递类型?

<generic ...></generic>
Run Code Online (Sandbox Code Playgroud)

小智 5

似乎在使用AOT 编译时,唯一的方法是用“any”替换泛型类型。见https://github.com/angular/angular/issues/11057

  • 在这方面,angular 似乎半途而废。如果 angular 的一些基本块(组件和指令)不能正确支持它,那么打字稿和类型安全有什么意义? (18认同)

小智 4

我只是在玩角度游戏,我通过使用 ViewChild 和内部组件和外部组件来完成这项工作。

在组件的内部组件声明中,如下所示:

@Injectable() 
@Component({
selector: 'inner-selector',
templateUrl: ...,
styleUrls: ...,
directives: [
...]
export class InnerComponent**<T>**  ...
Run Code Online (Sandbox Code Playgroud)

在路由器调用的外部组件中我做了:

import {Component} from '@angular/core';
import {InnerComponent} from '../components/inner.component';
import {ViewChild  } from '@angular/core';

@Component({
  selector:     'demo-app',
   template:  '<inner-selector></inner-selector>',
directives: [InnerComponent]
})
export class TestPage { 

  @ViewChild(InnerComponent)
  **private innerComponent:InnerComponent<MPSalesHeader>;**
};
Run Code Online (Sandbox Code Playgroud)

我不知道这是一个好方法,但它确实有效。

问候!