如何在Angular 9中创建自定义文本框组件？

Question

我想在Angular 9中为HTML标签创建一些常用的组件，比如text-box。

父组件HTML。

<form (ngSubmit)="onSubmit()">
            <textbox [name]="'articleDto.articleName'" (changeEvent)="txtChange($event)" [label]="'Article Name'" [placeholder]="'Article Name'"></textbox>
            <textbox [name]="'articleDto.titleName'" [label]="'Title Name'" [placeholder]="'Title Name'"></textbox>
          <button type="submit" class="btn btn-success mr-2">Submit</button>
</form>

父组件TS代码。

import { Component, OnInit } from '@angular/core';
import { spinx } from '../core/lib/spinx.service';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-new-article',
  templateUrl: './new-article.component.html'
})
export class NewArticleComponent implements OnInit {

  articleDto:any = {};
  constructor(private spinxService: spinx) { }

  ngOnInit(): void {
  }

  txtChange(event){
    alert(this.articleDto.articleName)
  }
}

子组件TS。

import { Component, forwardRef, Input, Output, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
  selector: 'textbox',
  template: `
  <div class="form-group">
  <label>{{label}}</label>
  <input type="text" name="{{name}}" [(ngModel)]="{{name}}" (change)="changeComplete()" class="form-control" placeholder="{{placeholder}}">
  </div>
  `,
  providers: [
    {provide: NG_VALUE_ACCESSOR, useExisting: TextboxComponent, multi: true}
  ]
})
export class TextboxComponent  {
  @Input() placeholder: string;
  @Input() name: string;
  @Input() label: string;
  @Output()
  changeEvent = new EventEmitter<string>();
  changeComplete() {
    this.changeEvent.emit('complete');
  }
}

我无法使用 [(ngModel)]="{{name}}" 在子组件中与父组件映射。

请提供一个解决方案建议。谢谢！我想在Angular 9中为HTML标签创建一些通用组件，比如文本框。

Answer 1

在用ngModel做双向数据绑定时，合适的语法是.NET。

 [(ngModel)]="name"

插值不需要用变量名。

更新：1.如果组件之间有父子关系，比如你的情况，你可以通过@Input()和@Output()装饰符在它们之间共享数据。

使用@Input()将数据从父组件共享到子组件。

<h3>Parent Component</h3>

<label>Parent Component</label>c
<input type="number" [(ngModel)]='parentValue'/>

<p>Value of child component is: </p>
<app-child [value]='parentValue'></app-child>

而在子组件中，"parentValue "可以被接收为 。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() value: number;
  constructor() { }

  ngOnInit() {
  }

}

现在，在从Child向Parent发送数据的情况下，我们可以使用@Output()事件发射器。因此，父体将有一个函数来接收从子体发出的数据，作为:

parent-app.component.html 
    <app-child [value]="parentValue" (childEvent)="childEvent($event)"></app-child>

parent-app.component.ts

childEvent(event) {
console.log(event);
}

And, the child.component.ts would look like :

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() PData: number;
  @Output() childEvent = new EventEmitter();
  constructor() { }
  onChange(value) {
    this.childEvent.emit(value);
  }

  ngOnInit() {
  }

}