Как обнаружить изменения от дочерней директивы в Angular 6 - PullRequest
Новая
       33

Как обнаружить изменения от дочерней директивы в Angular 6

0 голосов
/ 21 февраля 2019

Я пытаюсь создать пользовательский компонент, который выглядит как форма поиска.Я создал SearchComponent с селектором my-search, внутри которого я поместил элемент HTML <input> с прикрепленной директивой InputDirective с селектором [myInput]: 

<my-search>
  <input myInput>
</my-search>

Проблема заключается в какобнаружить изменения из InputDirective внутри SearchComponent?Например: я должен включить или отключить кнопку, когда пользователь вводит какой-то текст во ввод:

search.component.html 

<ng-content select="[myInput]"></ng-content>
<button type="button" [disabled]="!searchText">Search</button>

Я пытаюсь подписаться на изменениядиректива внутри компонента, но она не работает.

search.component.ts 

@Component({
  selector: 'my-search',
  templateUrl: './search.component.html'
})
export class SearchComponent implements AfterContentInit {
  @ContentChild(InputDirective) input: InputDirective;

  ngAfterContentInit() {
    this.input.changes.subscribe(changes => console.log(changes));
  }
}

Также я пытаюсь экспортировать собственный ввод в свойстве element.

input.directive.ts 

@Directive({
  selector: '[myInput]'
})
export class InputDirective {
  element: HTMLInputElement;

  constructor(private elementRef: ElementRef) {
    this.element = this.elementRef.nativeElement;
  }
}

И при попытке получить значение ввода с помощью геттера, но оно тоже не работает.

search.component.ts 

@Component({
  selector: 'my-search',
  templateUrl: './search.component.html'
})
export class SearchComponent implements AfterContentInit {
  @ContentChild(InputDirective) input: InputDirective;

  get searchText(): string {
    return this.input.element.value;
  }
}

Может кто-нибудь помочь мне с этим?Вот ссылка для экспериментов.

Ответы [ 3 ]

0 голосов
/ 21 февраля 2019

похоже, что вы на самом деле не переходите к элементу ввода, который вы пытаетесь контролировать, попробуйте: 

@Component({
  selector: 'my-search',
  templateUrl: './search.component.html'
})
export class SearchComponent implements AfterContentInit {
  @ContentChild(InputDirective) input: InputDirective;

  ngAfterContentInit() {
    this.input.element.addEventListener('change', e => console.log(this.input.element.value));
  }
}

это то, что вы ищете?

0 голосов
/ 12 марта 2019

В Angular (версия 2+) у нас есть что-то, вызывающее EventEmitter, с помощью которого дочерний компонент может генерировать любые свои изменения 

    Below is what you need in your child component
     1)@Output() change: EventEmitter<string> = new EventEmitter<string>();

    2)Also add a method that emits change when keypress event occurs
        onKeyPress(value: string) {
                this.change.emit(value);
            }
    3)change your html
    <my-search>
      <input myInput (change)="searchChange($event)">
    </my-search>

     4)change your boolean "searchText" in the method searchChange as below
       public searchChange(event:any)
{
if(event && event.length>0)
searchText=true
}
0 голосов
/ 21 февраля 2019

То, что вы ищете, - это HostListener в вашей директиве: 

  @HostListener('keypress') changed;

Вы можете посмотреть в нем больше и узнать, какие события доступны, но изменения будут срабатывать каждый раз, когда вы нажимаете на кнопку поиска, вы получаете другие, такие как'keydown', но вы должны попробовать его

Вот список других событий, если вы хотите посмотреть https://www.w3schools.com/tags/ref_eventattributes.asp

Изменить: вы можете даже сделать еще немного, добавив в Изменениетело метода для запуска выходного события обратно в родительский компонент для продолжения обработки этого события, но, как я понял из вашего вопроса, будет работать hostlistener.

...