指令中组件的角度访问数据

Question

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

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

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

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

• 在 Component 中调用我的 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;
    });
  }
}

我不确定这是否是您正在寻找的确切实现，但希望能够为您提供有关在父级和指令之间传输数据的足够信息来弄清楚。