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>

Answer 1

我一直在寻找同样的问题，而且我发现你的帖子没有回答。

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

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

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

1 个答案: