在 Angular 中插入 html 个字符串

Question

我有 html 看起来像这样：

<div *ngFor="let s of project.sections">
    <div class="project-desc-section">
         <h2>{{s.heading}}</h2>
         <div *ngFor="let w of s.work">
             {{w}}
         </div>
    </div>
</div>

我的项目对象是这样的

{ 
                name: "Project Name",
                id:"bbs",
                isClicked:false,
                description:`Sick app description`,
                sections:[
                            {
                                heading: "Mr header",
                                work:[
                                    '<p>Some cool stuff to talk about</p>',
                                    '<img src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif">'
                                    
                                ] 
                            }
                    
                ]
            },

这些是实际的类如果有人好奇的话：

export class Project{

    name:string;
    id:string;
    description:string;
    isClicked:boolean;
    sections:Section[];
    
   
    constructor(id:string,name:string,description:string,isClicked:boolean,sections:Section[]) {
        this.id=id;
        this.name = name;
        this.description = description;
        this.isClicked = isClicked;
        this.sections = sections;
    }
}

export class Section{

    heading:string;
    work:HTMLElement[];
    
    
    constructor(heading:string,work:HTMLElement[]) {
        this.heading = heading;
        this.work = work;
    }
}

不出所料，angular 不会编译 HTML，它只是将它们插入为字符串：

那么有什么方法可以强制 angular 编译 HTML？我知道这不是“Angular 方式”，但这是我的个人网站，所以我在这里享有完全的自由。如果您认为我的结构方式是一个糟糕的设计选择，我也同意，但我已经在这个兔子洞里走得太远了！

Answer 1

你可以用这个 innerHTML 属性.

示例：

<div [innerHTML]="yourVariable"></div>

在 Angular 中插入 html 个字符串

Interpolate html strings in Angular

html

typescript

angular-directive

angular