Question

所以我使用内联输入编辑组件如下：

  <app-inline-input-edit 
    [label]="'Manufacturer'" 
    [required]="true" 
    [(ngModel)]="ctrlTypes.manufacturer"
    name="manufacturer"
    [changed]="onChange">
  </app-inline-input-edit>

直列输入edit.component.ts

import {
  Component,
  Input,
  ElementRef,
  ViewChild,
  Renderer,
  forwardRef,
  OnInit, Renderer2 } from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

@Component({
  selector: 'app-inline-input-edit',
  templateUrl: './inline-input-edit.component.html',
  styleUrls: ['./inline-input-edit.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InlineInputEditComponent),
      multi: true
    }
  ]
})
export class InlineInputEditComponent implements OnInit {

  /** input control **/
  @ViewChild('inlineEditControl') inlineEditControl: ElementRef;
  /** The control label **/
  @Input() label = '';
  /** Type of input control **/
  @Input() type = 'text';
  /** Type of input control **/
  @Input() formField = 'text';
  /** Input value required **/
  @Input() required = false;
  /** Input control is disabled **/
  @Input() disabled = false;
  // Prefix the value
  @Input() prefix: any;
  // color of the confirm button
  @Input() confirmColor = 'primary';
  // color of the cancel button
  @Input() cancelColor = 'warn';

  @Input() changed: Function;

  /** private value of input **/
  private _value = '';
  /** value prior to editing **/
  private preValue = '';
  /** We are editing **/
  public editing = false;
  /** Callback when the value is changing **/
  public onChange: any = Function.prototype;
  /** Callback when the input is accessed **/
  public onTouched: any = Function.prototype;

  get value(): any {
    return this._value;
  }

  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this.onChange(v);
    }
  }

  // ControlValueAccessor interface impl
  writeValue(value: any) {
    if (value !== undefined) {
      this._value = value;
    }
  }

  // ControlValueAccessor interface impl
  public registerOnChange(fn: (_: any) => {}): void {
    this.onChange = fn;
  }

  // ControlValueAccessor interface impl
  public registerOnTouched(fn: () => {}): void {
    this.onTouched = fn;
  }

  cancel($event: Event) {
    this.value = this.preValue;
    this.editing = false;
  }

  confirm($event: Event) {
    this.editing = false;
    console.log('component', this);
    this.changed($event, this);
  }

  keypress($event) {
    if ($event.keyCode === 13) {
      this.confirm($event);
    }
  }

  // Start editing
  edit(value) {
    if (this.disabled) {
      return;
    }

    this.preValue = value;
    this.editing = true;
    // Set focus on the input element, but we need to give it one cycle so it is ready
    setTimeout(_ => this.inlineEditControl.nativeElement.focus());
  }


  constructor(element: ElementRef, private _renderer: Renderer2) { }

  ngOnInit() {
  }

}

ControllerTypesFormComponent.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { ControllerTypesService } from '../../services/controller-types.service';
import { DataService } from '../../services/data.service';
import { ControllerTypes } from '../../models/controller_types.model';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-controller-types-form',
  templateUrl: './controller-types-form.component.html',
  styleUrls: ['./controller-types-form.component.css']
})
export class ControllerTypesFormComponent implements OnInit, AfterViewInit {

  constructor(
    private controllerTypesService: ControllerTypesService,
    private dataService: DataService,
    private activatedRoute: ActivatedRoute) { }

  id = this.activatedRoute.snapshot.paramMap.get('id') || '';
  value = 'one';
  title = 'Add New';
  ctrlTypes: ControllerTypes;

  ngOnInit() {}

  ngAfterViewInit() {}

  onSubmit(form: NgForm) {
   // handle response after api is ready
    this.controllerTypesService.createControllerType(ctrlTypes).subscribe(
      (data) => {},
      (error) => {}
    );

  }


  onChange(event, ctrl) {
    console.log(event);
    console.log(ctrl);
    console.log(this.id); //undefined
    console.log(this.title); //undefined
    //controllerTypesService is undefined
this.controllerTypesService.createControllerType(toUpdate).subscribe(
          (data) => {},
          (error) => {}
        );

    }

在上面的onChange（）中，除了函数参数（event，ctrl）之外，该类的所有成员都是未定义的。但是，onSubmit（）工作正常。我相信这是因为onChange是在内联输入编辑组件内运行的函数。什么是使服务可用的最佳方式或我有什么不同的方法吗？

Answer 1

将您的changed - 函数更改为输出，而不是输入并在发生更改时发出。

@Input() changed: Function;

// ts
this.changed($event, this);

到

@Output() changed = new EventEmitter();

//ts
this.changed.emit($event);

并在您的ControllerTypesFormComponent

中收听此outpu

<app-inline-input-edit 
    [label]="'Manufacturer'" 
    [required]="true" 
    [(ngModel)]="ctrlTypes.manufacturer"
    name="manufacturer"
    (changed)="onChange($event)">
</app-inline-input-edit>

//ts
onChange(event) {
    this.controllerTypesService.createControllerType(toUpdate).subscribe(
      (data) => {},
      (error) => {}
    );
}

如何在组件功能中使用服务？

1 个答案: