Angular 2 将所有输入和输出注入扩展组件

Question

我需要一种方法来自动将输入和输出注入包装的组件中。

设置是一个具有许多输入和输出的简单组件。我想将此元素包装在另一个元素中，这是通过创建一个扩展 SimpleComponent 的 ExtendedComponent 来实现的。

这个扩展组件具有简单组件的所有输入和输出，我想要一种自动将这些输入和输出注入模板的方法。

下面提供了简化的代码片段来说明该问题。

app.component.html

<app-extended-component [sampleInput1]="4" [sampleInput2]="'sample string'" (sampleOutput)="handleEvent()"></app-extended-component>

simple.component.ts

@Component({
    selector: 'app-simple-component',
    templateUrl: './simple.component.html',
})
export class SimpleComponent  {
    @Input() sampleInput1: number;
    @Input() sampleInput2: string;
    @Output() sampleOutput = new EventEmitter();
    constructor() {
    }
    onClick() {
        this.sampleOutput.emit();
    }
}

简单组件.html

<div class="wrapper" (click)="onClick()">
    {{sampleInput1}}
    {{sampleInput2}}
</div>

extended.component.ts

@Component({
    selector: 'app-extended-component',
    templateUrl: './extended.component.html',
})
export class ExtendedComponent extends SimpleComponent {
    constructor() {
        super();
    }
}

extended.component.html

// Need a way to automatically inject all inputs and outputs into this component
<app-simple-component></app-simple-component>
// It can be done manually like below, but this is not the intended solution
<app-simple-component [sampleInput1]="sampleInput1" [sampleInput2]="sampleInput2"></app-simple-component>

Answer 1

我正在寻找同样的问题，我找到了你的帖子没有答案。

它不适用于版本 <2.3.0-rc.0如果要使用它，则必须将@Input放在子组件中或升级角度版本。

但我希望自从您发布此消息以来，您找到了解决方案:)