3

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

设置是一个具有多个输入和输出的 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>

扩展组件.ts

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

    constructor() {
        super();
    }
}

扩展的.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>
4

1 回答 1

1

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

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

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

于 2017-10-03T18:57:30.027 回答