如何在子组件中设置元素的值

Question

我在我的 Angular 应用程序中使用子组件和父组件。我想从父组件设置我的子组件中的输入元素的值。我从 api 获取数据，我想在我的子组件中设置的值是“HTML”类型。我该怎么做。请指导我。

注意：我能够从父组件获取数据到子组件。我想知道如何使用 formControl 将 HTML 格式的值传递给我的子组件并显示它。

HTML 父组件

<form[formGroup]='parentForm'>
    <childComponent [childForm]= "parentForm.controls.childForm" ></childComponent>
</form>

HTML 子组件

<form[formGroup]='childForm'>
    <div>
        <input [innerHtml] = "test" formControlName = "childttest">
    </div>
</form>

TS

ngOnInit() {
    this.parentForm = this.FormBuilder.group({
        test1: [''],
        childForm: this.FormBuilder.group({
            childtest: ['']
        })
    });
    // data contains HTML code. i want to display only text not HTML.
    this.parentForm.controls.childForm.controls.childtest.setValue(this.data);
}

Answer 1

在子组件中声明输入参数并在父组件中绑定：

儿童 TS

export class ChildComponent {
  @Input() valueToBeUsedInChild: any;
}

父 HTML

<childComponent [valueToBeUsedInChild]="data"></childComponent>

见Component Interaction

Answer 2

使用 Input() 装饰器

//Parent component
import { Component } from '@angular/core';

@Component({
  selector: 'parent',
  template: `
    <child [childData]="parentData"></child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentData = "pass data from parent to child"
  constructor() { }
}

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

@Component({
  selector: 'child',
  template: `
      Say {{ childData}}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childData: string;

  constructor() { }

}