角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> 

Answer 1

は、親に出力とeventHandlerが関連付けられています子コンポーネントから親コンポーネントへの値を取得します。

TS子コンポーネントで

子コンポーネントのHTMLで

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

親コンポーネントのHTMLで

< (simpleOutput)="handleEvent($data)" /> 

：私たちのケースで

このような何かを

onClick() { 
     this.sampleOutput.emit(some object data here`enter code here`); 
    } 

Answer 2

私は同じ問題を探していましたが、回答なしであなたの投稿を見つけました。

バージョンでは機能しません。< 2.3.0-rc.0 これを使用するには、@Inputを子コンポーネントに配置するか、角バージョンをアップグレードする必要があります。

は、しかし、私はあなたがこのメッセージを投稿以来、あなたは、私がこれを行う方法を理解し解決策:)