Làm cách nào để chuyển một tham số kiểu chung cho thành phần Angular2?

Question

Hãy nói rằng tôi có một thành phần với một loại tham số đầu vào cố định,

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

Làm thế nào để đi về việc loại thông số chung chung, tức là

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

Đó là, làm thế nào để vượt qua các loại trong mẫu của thành phần gốc?

<generic ...></generic> 

Answer 1

Tôi chỉ đang chơi với góc cạnh và tôi đã làm việc này bằng cách sử dụng ViewChild, bằng cách sử dụng Thành phần bên trong và bên ngoài.

Trong tuyên bố thành phần bên trong của thành phần giống như:

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

trong thành phần bên ngoài mà gọi bằng router của tôi đã làm:

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>;** 
}; 

Tôi không biết là này một cách tốt, nhưng nó đã làm việc.

Trân trọng!

Answer 2

Dường như bạn có thể sử dụng các tham số kiểu chung trong các thành phần con Angular 2.

@Component({ 
    selector: 'app-child', 
    template: '<p>Generic Child</p><p>{{cp}}</p>' 
}) 
export class GenericChildComponent<T> { 
    @Input() cp: T; 
} 

import { GenericChildComponent } from './generic-child.component'; 
@Component({ 
    selector: 'app-root', 
    template: '<app-child [cp]="p1"></app-child><hr /><app-child [cp]="p2"></app-child>', 
    directives: [GenericChildComponent] 
}) 
export class ParentComponent { 
    p1: string = 'property 1'; 
    p2: number = 100; 
} 

này hoạt động mà không tin tưởng hoặc là kỹ thuật ViewChild gợi ý above hoặc một kỹ thuật lớp cơ sở đề nghị here.

Answer 3

Dường như khi sử dụng AOT compilation cách duy nhất để thực hiện việc này là thay thế loại chung với 'bất kỳ'. Xem https://github.com/angular/angular/issues/11057