Question

因此，我正在尝试为一个项目构建“自动完成”指令，该指令将查询API并显示要选择的结果列表。我有一个显示带有简单输入框的模式的组件。我需要能够在框中键入搜索成员的信息，单击成员并将其添加到组件中的数组。

编辑： 我遇到的问题是，当我调用this.wlAutocomplete.next(value);时，它会回到我的组件中，并使用输入字段中的正确值进行API调用，它不会将数据返回给要处理的指令那里的API响应。

StackBlitz示例： https://stackblitz.com/edit/angular-11erew

该组件将跟踪选定成员的数组。我需要能够：

在组件中调用我的API以获取数据并返回指令
该指令将需要读取数据并在输入框下方显示一个列表（我可以在此处执行HTML）
单击下拉列表中的列表项会将选择返回发送给组件以根据需要进行处理，例如。将其添加到数组中。

我的组件有一个方法：

queryMembers(value: string): Subscription {
  return this.memberService.query({ term: value, groupKey: this.group.groupKey })
    .subscribe((members) => {
      console.log(members);
      return this.searchMemberList = members;
    });
}

我在这样的模板中使用哪个：

<input (wlAutocomplete)="queryMembers($event)" class="uk-search-input" type="search" placeholder="Search...">

以下是该指令的代码：

@Directive({
  selector: 'input[wlAutocomplete]'
})
export class AutocompleteDirective {
  modelChanged: Subject<string> = new Subject<string>();
  subscription: Subscription;
  debounce: number = 500;

  constructor() {
    this.subscription =
      this.modelChanged
        .pipe(debounceTime(this.debounce))
        .subscribe(value => {
          this.wlAutocomplete.next(value); // I need to get the data from component method passed into `wlAutocomplete`
        });
  }

  @Output() wlAutocomplete: EventEmitter<any> = new EventEmitter();

  @HostListener('input', ['$event'])
  onChange($event) {
    this.modelChanged.next($event.target.value);
  }
}

Answer 1

好的，我想我理解您现在想做的事情，感谢示例。您要将值从父模板发送到指令？基本上，您需要为指令提供输入，并在父级中将其绑定。

签出this question for more

import {Directive, EventEmitter, HostListener, Input, Output} from '@angular/core';
import {Subject, Subscription} from "rxjs";
import {debounceTime} from "rxjs/operators";

@Directive({
  selector: 'input[wlAutocomplete]'
})
export class AutocompleteDirective {
  modelChanged: Subject<string> = new Subject<string>();
  subscription: Subscription;
  debounce: number = 500;

  // label and type your input, then handle it however you like
  @Input() value: any;

  constructor() {
    this.subscription =
      this.modelChanged
        .pipe(debounceTime(this.debounce))
        .subscribe(value => {
          console.log('value', value)
          console.log('directive', this.wlAutocomplete.next(value)); // I need to get the data from component method passed into `wlAutocomplete`
        });
  }

  @Output() wlAutocomplete: EventEmitter<any> = new EventEmitter();

  @HostListener('input', ['$event'])
  onChange($event) {
    console.log('directive called')
    this.modelChanged.next($event.target.value);
  }
}

模板

// bind to the input in the template
    AutoComplete: <input type="text" [value]="value" (wlAutocomplete)="queryMembers($event)" />

组件

import { Component } from '@angular/core';
import {Subscription} from "rxjs";
import {MemberService} from './member.service'
import {Member} from './member';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // send value to directive 
  value: any;
  name = 'Angular';
  group: any = { groupKey: 'test' };
  debugMemberList: Member[];
  constructor(private memberService: MemberService){}

  queryMembers(value: string): Subscription {
  return this.memberService.query({ term: value, groupKey: this.group.groupKey })
    .subscribe((members) => {
      console.log('In component: ', members);
      this.value = members;
      return this.debugMemberList = members;
    });
  }
}

我不确定这是否是您要查找的确切实现，但希望它能为您提供有关在父代和指令之间传输数据的足够信息以解决该问题。

指令中来自组件的Angular Access数据

1 个答案: