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

我想为Angular 9中的HTML标记创建一些常见组件，比如文本框

父组件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>

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)
  }
}

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');
  }
}

子组件TS:

<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>

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)
  }
}

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');
  }
}

从'@angular/core'导入{Component，forwardRef，Input，Output，EventEmitter}；
从'@angular/forms'导入{NG_VALUE_ACCESSOR}；
@组成部分({
选择器：“文本框”，
模板：`
{{label}}
`,
供应商：[
{provide:NG_VALUE_访问器，useExisting:TextboxComponent，multi:true}
]
})
导出类TextboxComponent{
@Input（）占位符：字符串；
@Input（）名称：string；
@Input（）标签：字符串；
@输出（）
changeEvent=新的EventEmitter（）；
变更完成（）{
this.changeEvent.emit（'complete'）；
}
}

我无法在与父组件映射的子组件中使用

[（ngModel）]=“{{name}”

---

请为此提供解决方案/建议。谢谢

使用ngModel进行双向数据绑定时，适当的语法为：

 [(ngModel)]="name"

插值不需要与变量名一起使用

更新： 1.如果组件具有父/子关系（如您的情况），则可以通过@Input（）和@Output（）装饰器在它们之间共享数据

使用@Input（）从父级到子级共享数据：

现在，在将数据从子对象发送到父对象的情况下，我们可以使用@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() {
  }

}

parent-app.component.html
parent-app.component.ts
儿童事件（事件）{
console.log（事件）；
}
并且，child.component.ts看起来像：
从“@angular/core”导入{Component，OnInit，Input，Output，EventEmitter}；
@组成部分({
选择器：“应用程序子项”，
templateUrl:“./child.component.html”，
样式URL:['./child.component.css']
})
导出类ChildComponent实现OnInit{
@Input（）PData：数字；
@Output（）childEvent=neweventemitter（）；
构造函数（）{}
onChange（值）{
this.childEvent.emit（值）；
}
恩戈尼尼特（）{
}
}

亲爱的Gauri，它只给出了我的模型名articleDto.articleName，但我想要父组件对象中的值，他们在子组件文本框中写入了一些文本。