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);
}
解决方案
使用 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() { }
}
推荐阅读
- javascript - 在 JavaScript 中给出错误输出的二叉树中所有节点的总和
- java - Firebase 数据库在收藏夹列表中设置对象
- python - 在 Tkinter 中将文本标记出框架
- docker - 在 32 位机器上安装 docker 的问题
- c - 打印一个 2 字节的数据包
- python - Python String 对象不支持错误
- python - 在 IDLE 中但未在终端中发生 Tesseract Not Found 错误
- svg - 更改 SVG 属性(宽度、高度、视图框和变换)以从内部绘图中删除填充
- python-3.x - 如何从另一个项目打开一个python项目
- python - 比较python中的二维numpy数组