页面加载或显示/隐藏部分以更新模型值

Question

我有一个为大写速度转换为大写的angualr指令（我知道有一个角管为此，但是我创建了此指令来理解概念。我实际上想要其他指令的类似功能）。但是由于某种原因，该指令最初并未为预定义的模型值调用。但是，当我手动更新输入文本框时，这将触发。

我希望Angular指令在页面加载上运行或显示组件的显示/隐藏部分。

在此示例中，我想在页面加载中预先填充带有“ test”的“用户名”文本框，或者显示组件的“显示/隐藏”部分（此显示/隐藏部分将根据服务调用的响应显示或隐藏）因为我用“测试”初始化了模型值，并定义了appuppercase输入文本框上的指令。

我们如何告诉Angular指令在页面加载上运行或显示组件的“隐藏”部分。

这是appuppercase指令，

@Directive({
  selector: '[appUpperCase]'
})
export class UpperCaseDirective implements OnInit {

  constructor(private control: NgControl) { }

  processInput(value: any) {
    return value.toUpperCase();
  }

  @HostListener('ngModelChange', ['$event'])
  ngModelChange(value: any) {
    console.log(`directive called ${value}`);
    this.control.valueAccessor.writeValue(this.processInput(value));
  }

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(value: any) {
    this.control.valueAccessor.writeValue(this.processInput(value));
  }

  ngOnInit(): void {
  }

}

这是我的html文件：

<form novalidate (ngSubmit)="submitForm()">
    <div class="form-group row">
      <label for="UserName" class="col-2 col-form-label">User Name:</label>
      <div class="col-4">
      <input class="form-control" id="UserName" name="userName" required [(ngModel)]="userName" appUpperCase>
      Model: {{ userName }}
      </div>
    </div>

  <button class="btn btn-primary" type="submit">
      Search
    </button>
  </form>

在组件文件中。

 userName: any;
  constructor() {
    this.userName = 'test';
  }

Answer 1

我真的不明白您为什么使用hostListener（首先，对于keydown.backspace侦听器，您不会在侦听器中收到值，而是事件）。

为什么不只是听控件的Valuechanges流并在此处更新它呢？

另外，您应该使用ReactiveFormSModule，以便获得值。

// directive.ts

import { Directive, OnDestroy, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms';
import { Subject } from 'rxjs';
import { distinctUntilChanged, startWith, takeUntil } from 'rxjs/operators';

@Directive({
  selector: '[appUpperCase]',
})
export class UpperCaseDirective implements OnInit, OnDestroy {
  private _destroyed$ = new Subject<void>();

  constructor(private control: NgControl) {}

  processInput(value: any) {
    return value.toUpperCase();
  }

  ngOnDestroy(): void {
    this._destroyed$.next();
    this._destroyed$.complete();
  }

  ngOnInit(): void {
    this.control.valueChanges
      .pipe(
        startWith(this.control.value),
        distinctUntilChanged((first, second) => {
          return this.processInput(first) === this.processInput(second);
        }),
        takeUntil(this._destroyed$)
      )
      .subscribe((value) => {
        this.control.control.setValue(this.processInput(value));
      });
  }
}

// component.ts
import { Component, VERSION } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  userName = new FormControl('test');

  constructor() {}

  submitForm() {
    console.log(this.userName.value);
  }
}

<!--component.html-->
<form novalidate (ngSubmit)="submitForm()">
  <div class="form-group row">
    <label for="UserName" class="col-2 col-form-label">User Name:</label>
    <div class="col-4">
      <input
        [formControl]="userName"
        class="form-control"
        id="UserName"
        name="userName"
        required
        appUpperCase
      />
      Model: {{ userName.value }}
    </div>
  </div>

  <button class="btn btn-primary" type="submit">Search</button>
</form>