완전한 Angular4 FormText 구성 요소를 구현하는 데 필요한 단계는 무엇입니까?

이번에는 완전한 Angular4 FormText 구성 요소를 구현하는 데 필요한 단계와 완전한 Angular4 FormText 구성 요소를 구현하는 데 필요한 노트를 알려 드리겠습니다. 다음은 실제 사례입니다.

이 글은 주로 완전한 Angular4 FormText 컴포넌트를 작성하고, 모든 사람과 공유하고, 메모를 남기는 방법을 소개합니다

구성요소 정의

import { Component, Output, Input, forwardRef, EventEmitter} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
@Component({
 selector: 'form-text',
 template: `
  <p >
    <label>{{label}}：</label>
    <input type="text" [(ngModel)]="value"
    placeholder="{{placeholder}}" >
  </p>
 `,
 providers: [
  {
   provide:NG_VALUE_ACCESSOR,
   useExisting:forwardRef(()=>FormTextComponent),
   multi:true
  }
 ]
})
export class FormTextComponent implements ControlValueAccessor {
 
 @Input() label:string = '';
 @Input() placeholder: string='';
 @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
 
 public innerValue: any;
 public changeFn: Function = () => {};
 
 get value(): any {
  return this.innerValue;
 };
 set value(v: any) {
  if (v !== this.innerValue) {
   this.innerValue = v;
   this.changeFn(v);
  }
 }
 writeValue(value: any) {
  if (value !== this.innerValue) {
   this.innerValue = value;
  }
 }
 registerOnChange(fn: any) {
  this.changeFn = fn;
 }
 registerOnTouched(fn: any) {
  //
 }
}

구성요소 사용법

<form-text [(ngModel)]="mobile" [placeholder]="placeholder" [label]="label"></form-text>
<p>{{mobile}}</p>

참고 사항:

구성 요소의 공급자를 구성해야 합니다.
ControlValueAccessor인터페이스를 구현해야 합니다.                                         나는 당신이 이 기사를 읽는 방법을 마스터했다고 믿습니다. 더 흥미진진한 내용을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

추천 자료:

js가 글꼴 크기를 일치시키고 계산하는 방법

작업 모달 단일 로드 데이터

위 내용은 완전한 Angular4 FormText 구성 요소를 구현하는 데 필요한 단계는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!