代码之家  ›  专栏  ›  技术社区  ›  ararb78

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

  •  0
  • ararb78  · 技术社区  · 8 年前

    我在我的子组件中开发了一个自动完成,我在父组件中包含了几次,一切正常,现在我有一个问题,如何从父组件中获取每个自动完成的选定值。我希望在单击搜索按钮时,检索方法“popupcylookupmodel()”中的值,但当我要求“this”时“自动完成名称”总是返回未定义的名称。我认为这部分做得不对。有什么想法吗?

    @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 = [];
    }
    }
    

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

    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);
        }
    }
    
    1 回复  |  直到 8 年前
        1
  •  0
  •   KlsLondon    8 年前

    您可以使用ViewChild decorator(在单个自动完成的情况下)或ViewChildren(在多个自动完成的情况下)

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

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