Question

我在我的子组件中开发了一个自动完成，我在父组件中多次包含，一切正常，现在我有一个问题，如何从我的父组件中获取每个自动完成的选定值。我想要它，当我点击搜索按钮，检索方法中的值＆＃34; popupCopyLookupModel（）＆＃34;但是当我要求＆＃34;这时。＆＃34; +＆＃34;以及自动完成名称＆＃34;总是让我不确定。我认为这部分做得不对。有任何想法吗？ autocomplete.component.ts（component child）：

@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;

在这里，您告诉Angular获取任何子HeaderComponent类型的引用。从该引用中，您可以访问父组件中组件的所有属性。

使用angular2从组件子级到组件父级获取值

1 个答案: