HTMLテンプレートで宣言されているコンポーネント内部コンポーネントの取得

Question

内部コンポーネントの数が異なるさまざまな場所で使用されるフィルタコンポーネントを作成したいとします。

filter.component.html

<select-filter name="somename" ></select-filter> 
<input-filter name="somename"></input-filter> 
... 

選択フィルタと入力フィルタは、インターフェースFilterItem

export interface FilterItem{ 
    name: string; 
    getValue() : any; 
} 

を実装するコンポーネントであるIは、（例えば、のgetValueを（呼び出し）各コンポーネントのインスタンスを取得します）inside filter.component.ts; これを行うにはどうすればよいですか？

Answer 1

溶液から採取した実装の一例です。パラメータが抽象クラスであることが重要です。私たちはそこでインターフェイスを使用することはできません。実際には抽象クラスも使用できませんが、ネストされたコンポーネントにプロバイダを使用しています。私の場合 それは抽象クラスを拡張し、プロバイダーとして、この抽象クラスを宣言する必要があり

export class FilterComponent{ 
    @ContentChildren(FilterItem) filterItems: QueryList<FilterItem>; 
    constructor() {} 

    getItems(){ 
     console.log(this.filterItems); 
     this.filterItems.forEach(i => { 
     console.log('My name is ' + i.name + 'My value is ' + i.getValue()); 
     }); 
    } 
} 

2）ネストされたコンポーネントです。私の場合どこでも （選択文字列のコンポーネントをしたいフィルタ部品を使用して

@Component({ 
    selector: 'app-string-filter-item', 
    templateUrl: './string-filter-item.component.html', 
    styleUrls: ['./string-filter-item.component.scss'], 
    providers: [{provide: FilterItem, useExisting: forwardRef(() => StringFilterItemComponent)}] 
}) 
export class StringFilterItemComponent extends FilterItem { 

    selectValue: string; 

    @Input() 
    name:string; 

    caption: 'SHow me smt'; 

    getValue(){ 
    return this.selectValue; 
    } 
} 

文字列フィルタitem.component.html

<p> 
    <input type="text" [(ngModel)]="selectValue"> 
</p> 

filter.component.html

<div class="filter-wr"> 
    <ng-content></ng-content> 
</div> 

で 私が使用する別のコンポーネントです）

<app-filter> 
    <app-select-filter-item name="first"></app-select-filter-item> 
    <app-string-filter-item name="second"></app-string-filter-item> 
    <app-select-filter-item name="third"></app-select-filter-item> 
    <app-string-filter-item name="fourth"></app-string-filter-item> 
</app-filter> 

これですべてです！ご注意いただきありがとうございます！

Answer 2

フォームコントロールであるコンポーネントを作成したいと思うようです。私が正しい場合

、代わりにControlValueAccessorを使用してみてください： https://angular.io/api/forms/ControlValueAccessor

がそれらを使用する方法についての例がたくさんあります。 ここ次

1）親コ​​ンポーネントがQueryListとしてPARAMと@ContentChildren又は@ViewChildrenを使用して、子コンポーネントのデータを取得しているhttps://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

export function createCounterRangeValidator(maxValue, minValue) { 
    return (c: FormControl) => { 
    let err = { 
     rangeError: { 
     given: c.value, 
     max: maxValue || 10, 
     min: minValue || 0 
     } 
    }; 

    return (c.value > +maxValue || c.value < +minValue) ? err: null; 
    } 
} 

@Component({ 
    selector: 'counter-input', 
    template: ` 
    <button (click)="increase()">+</button> {{counterValue}} <button (click)="decrease()">-</button> 
    `, 
    providers: [ 
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CounterInputComponent), multi: true }, 
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => CounterInputComponent), multi: true } 
    ] 
}) 
export class CounterInputComponent implements ControlValueAccessor, OnChanges { 

    propagateChange:any =() => {}; 
    validateFn:any =() => {}; 

    @Input('counterValue') _counterValue = 0; 
    @Input() counterRangeMax; 
    @Input() counterRangeMin; 

    get counterValue() { 
    return this._counterValue; 
    } 

    set counterValue(val) { 
    this._counterValue = val; 
    this.propagateChange(val); 
    } 

    ngOnChanges(inputs) { 
    if (inputs.counterRangeMax || inputs.counterRangeMin) { 
     this.validateFn = createCounterRangeValidator(this.counterRangeMax, this.counterRangeMin); 
     this.propagateChange(this.counterValue); 
    } 
    } 

    writeValue(value) { 
    if (value) { 
     this.counterValue = value; 
    } 
    } 

    registerOnChange(fn) { 
    this.propagateChange = fn; 
    } 

    registerOnTouched() {} 

    increase() { 
    this.counterValue++; 
    } 

    decrease() { 
    this.counterValue--; 
    } 

    validate(c: FormControl) { 
    return this.validateFn(c); 
    } 
}