angle2を使用してコンポーネントの子からコンポーネントの父に値を取得

Question

私は親コンポーネントに何度も含まれていて、すべて正常に動作する子コンポーネントにオートコンプリートを作成しました。各自の親コンポーネントからのオートコンプリート。検索ボタンをクリックしてメソッド "popupCopyLookupModel（）"の値を取得するが、 "これ"を求めるときは、その値を必要とする。 + "とオートコンプリート名"は常に私を返す。私はこの部分が正しくやっていないと思う。何か案は？ autocomplete.component.ts（コンポーネントの子）：

@Component({ 
selector: 'app-autocomplete', 
templateUrl: './autocomplete.component.html', 
styleUrls: ['./autocomplete.component.css'], 
host: { 
    '(document:click)': 'handleClick($event)', 
}, 
}) 
export class AutocompleteComponent implements OnInit { 

@Input() public filteredList = []; 

private estilosListaAC = new EstilosLista(); 
private propiedadesListaAC = new PropiedadesLista(); 
private propiedadesInputAC = new PropiedadesInput(); 
@Input() opciones : OpcionesAutocomplete; 

//Origen de datos, se lo pasamos desde el componente padre: 
@Input() dataSource:any[]; 
@Input() dataSubject:Subject<any[]>; 
@Input() propiedad1:string = ""; 
@Input() propiedad2:string = ""; 
@Input() classInput:string = ""; 
@Input() textoLabel:string = ""; 


//Valor tecleado en el input: 
public query = ''; 
public elementRef; 
private _dataSource:any[];  
private _opciones:OpcionesAutocomplete; 

getData(): Observable<any[]> { 
if (this.dataSubject) 
{ 
    return this.dataSubject.asObservable(); 
} 
else 
{ 
    return Observable.of([]); 
} 
} 

//El propio componente: 
constructor(myElement: ElementRef) { 
    this.elementRef = myElement; 
}  

ngOnInit() { 
//Establecemos el origen de datos que nos llega del componente padre: 
this._dataSource = this.dataSource; 
this.getData().subscribe((x) => { 
    if (x && x.length > 0) 
    this._dataSource = x; 
    }, 
    error => { console.log("Error en al recuperar datos en Autocomplete") } 
); 
//Establecemos las opciones por defecto, si no nos llegan del componente padre, cogemos las definidas en este propio componente:  
if (this.opciones instanceof OpcionesAutocomplete){ 
    this._opciones = this.opciones; 
    if (this._opciones.propiedadesLista instanceof PropiedadesLista){ 
    this.propiedad1 = this._opciones.propiedadesLista.propiedad1; 
    this.propiedad2 = this._opciones.propiedadesLista.propiedad2; 
    } 
    if (this._opciones.propiedadesInput instanceof PropiedadesInput){ 
    this.textoLabel = this._opciones.propiedadesInput.texto; 
    this.classInput = this._opciones.propiedadesInput.class; 
    } 
}else{ 
    this.textoLabel = "Sin Configurar"; 
}  
} 

//Se lanza cuando se selecciona un elemento de la lista: 
select(item){ 
    //this.query = item 
    if (item[this._opciones.propiedadesLista.propiedad1] !== undefined) 
    { 
     this.query = item[this._opciones.propiedadesLista.propiedad1] 
    } 
    if (item[this._opciones.propiedadesLista.propiedad2] !== undefined) { 
     this.query = this.query + ' ' + item[this._opciones.propiedadesLista.propiedad2]; 
    } 
    //this.query = item.propiedad1 + item.propiedad2; 
    this.filteredList = []; 
} 
} 

busquedacopiadora.component.html（コンポーネント父）：

<app-autocomplete id="selectCliente" [dataSubject]="clientesSub"  
    [dataSource]="clientes"> 
</app-autocomplete> 

<app-autocomplete id="selectProveedor" [dataSubject]="proveedoresSub" 
    [dataSource]="proveedores" [opciones]="opcionesAutocompleteProveedores"> 
</app-autocomplete> 



<button type="button" class="btn btn-primary botonBuscar" 
(click)="rellenarCopiadoraBusquedaModel($event)"> 
    <span class="glyphicon glyphicon-search"></span> Search 
</button> 

busquedacopiadora.component.ts（コンポーネント父）：

rellenarCopiadoraBusquedaModel() 
{ 
    if (this.selectCliente !== undefined && this.selectCliente !== 0) 
    {     
     console.log('Cliente: ' + this.selectCliente); 
    } 

    if (this.selectProveedor !== undefined && this.selectProveedor !== 0) 
    {     
     console.log('Cliente: ' + this.selectProveedor); 
    } 
} 

Answer 1

複数の場合にViewChildデコレータ（単一のオートコンプリートの場合）またはViewChildrenを使用できます たとえば、

export class AppComponent implements OnInit { @ViewChild(HeaderComponent)header: HeaderComponent; 

ここでは、Angerularに任意の子HeaderComponentタイプの参照を取得するよう指示します。 その参照から、親のコンポーネントのすべてのプロパティにアクセスできます。