onclick按钮时刷新html中的单个组件答案

【问题标题】：refresh a single component in html when onclick buttononclick按钮时刷新html中的单个组件
【发布时间】：2021-01-28 17:34:23
【问题描述】：

当页面加载 (OnInit) 时，我的组件 B 直接显示，我希望每次单击提交按钮时组件 B 都会更新。

我有一个组件A，在这个组件中我有一个表单和另一个组件componentA。我的 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>

我的组件 B 如下所示： .ts：

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

  constructor() { }

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

当页面加载 (OnInit) 时，我的组件 B 直接显示，我希望每次单击提交按钮时组件 B 都会更新。

为什么componentB不刷新？我也尝试直接在表单中制作我的componentB，但它没有用。我也尝试调用 ngOnInit 来刷新所有组件，但我会失去我的价值。

我也想通过订阅来做到这一点，但它不适用于输入值

我该怎么做？

【问题讨论】：

你需要使用EventEmitersfireship.io/lessons/…
我的价值在我父母身上发生了变化，而不是在我的孩子身上......
将控制台从 ngOnInit 更改为 componentB 中的 ngonchanges，因为 ngOnInit 只被调用一次

标签： javascript angular

【解决方案1】：

在子组件中实现 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}`);
   }
 }
}

【讨论】：