在Angular中,如果要渲染传递的HTML列表,可以使用Angular的内置的innerHTML指令来实现。
首先,创建一个组件,并在该组件中定义一个接受HTML列表的属性。然后,在模板中使用innerHTML指令来渲染传递的HTML列表。
以下是一个示例代码:
// app.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
@Input() htmlList: string;
}
在上面的示例中,AppComponent组件接受一个名为htmlList的属性,该属性是一个字符串类型。在模板中,使用innerHTML指令将htmlList的值渲染为HTML。
然后,创建一个父组件,并将HTML列表作为属性传递给子组件。
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
myHtmlList = '- Item 1
- Item 2
- Item 3
';
}
在上面的示例中,ParentComponent组件将一个包含HTML列表的字符串传递给子组件ChildComponent。
最后,创建一个子组件,并在其中使用AppComponent来渲染传递的HTML列表。
// child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`
})
export class ChildComponent {
@Input() htmlList: string;
}
在上面的示例中,ChildComponent组件将父组件传递的HTML列表字符串作为属性传递给AppComponent组件。
通过这种方式,Angular将能够渲染传递的HTML列表。请注意,要确保传递的HTML是安全的,以防止潜在的安全漏洞。