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

Question

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

现有一个SimpleComponent，其中有许多输入和输出。我想将此元素包装在另一个元素中，通过创建扩展了SimpleComponent的ExtendedComponent已经实现了这一点。

这个ExtendedComponent拥有SimpleComponent的所有输入和输出，我希望能够自动将这些输入和输出注入到模板中。

以下是简化的代码片段，以说明问题。 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();
    }
}

simple.component.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>

- Carlton

Answer 1

我遇到了同样的问题，发现了你的帖子，但没有答案。

在版本小于2.3.0-rc.0时它不起作用。如果想使用它，您必须将@Input放入子组件或升级您的angular版本。

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

- Swarovski

---

你有解决方案了吗？ - mryuso92