在Angular 8中,你可以使用@Input装饰器来将HTML作为输入变量传递给一个组件。下面是一个示例代码:
首先,在父组件的HTML中定义一个变量,并将其传递给子组件:
然后,在父组件的TypeScript文件中,定义一个名为html的变量,并为其赋值:
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
html = 'Hello, World!
';
}
接下来,在子组件的TypeScript文件中,使用@Input装饰器来接收父组件传递的htmlContent变量:
// child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() htmlContent: string;
}
最后,在子组件的HTML文件中,可以直接使用传递的htmlContent变量:
现在,当你在父组件的html变量中更改HTML内容时,它将自动更新并传递给子组件,并在子组件中显示出来。