Javascript 单击按钮时刷新html中的单个组件

当页面加载（OnInit）直接显示my componentB时，我希望每次单击submit按钮时componentB都会更新

我有一个组件a，在这个组件中我有一个表单和另一个组件a。 我的ts看起来像这样：

export class componentA implements OnInit {
  testForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.testForm= this.formBuilder.group({
      name: [''],
      username: [''],
    });
  }

  submit(): void {
    console.log('ok');
    console.log(this.partnerForm.get('name').value);
    console.log(this.partnerForm.get('username').value);
    // here i want to refresh my componentB in .html
  }
}

和我的html文件：

<div>
 <form name="testForm" [formGroup]="testForm" (ngSubmit)="submit()">
  <div>
      <label for="name" position="floating" required>name</label>
      <input ngDefaultControl formControlName="name" name="name" id="name" value="name"></input>
  
      <label for="username" position="floating" required>username</label>
      <input ngDefaultControl formControlName="username" name="username" id="username" value="username></input>
    <button>Submit</button>
  </div>
  </form>
  <componentB [formDaten]="testForm"></componentB>
<div>

当页面加载（OnInit）直接显示my componentB时，我希望每次单击submit按钮时componentB都会更新

为什么组件B不刷新？我也尝试直接在表单中创建组件B，但它不起作用。我还试图调用ngOnInit来刷新all组件，但这样我就会失去价值

我也认为可以使用subscribe，但它不能使用输入值

---

如何执行此操作？

在子组件中实现ngOnChanges事件–每次更改组件中输入控件的值时，都会执行此事件。它总是接收一个变更数据，其中包含封装在SimpleChange中的绑定属性的当前值和以前的值

export class componentB implements OnInit, OnChanges {
 @Input() datenForm;

constructor() { }

ngOnInit(): void {
  console.log(datenForm.get("name").value);

ngOnChanges(changes: SimpleChanges) {
 for (let key in changes) {
    console.log(`${key} changed.
    Current: ${changes[key].currentValue}.
    Previous: ${changes[key].previousValue}`);
   }
 }
}

---

您需要使用

eventemitters

My value change in My parent而不是My child…将控制台从ngOnInit更改为ngonchanges in componentB，因为ngOnInit只被调用一次

export class componentB implements OnInit, OnChanges {
 @Input() datenForm;

constructor() { }

ngOnInit(): void {
  console.log(datenForm.get("name").value);

ngOnChanges(changes: SimpleChanges) {
 for (let key in changes) {
    console.log(`${key} changed.
    Current: ${changes[key].currentValue}.
    Previous: ${changes[key].previousValue}`);
   }
 }
}