Angular 13 : Dynamic Html with data binding

Question

我的要求是将数据绑定(bind)到动态添加的 HTML 内容。即，

app.component.html

<div>
    <p> {{data.name}} </p>
    <div class="contact" [innerHTML]="htmlContent | safe: 'html'"></div>
<div>

我已经创建了一个安全管道来绑定(bind) html 内容。

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponet {
    data = {
        name: 'sample',
        mobile: '9999988888',
        email: 'temp@mail.com'
    };
    htmlContent = '';

    constructor() {}

    ngOnInit() {
        this.getDynamicContent();
    }

    // api call to get dynamic content 
    getDynamicContent() {
        this.htmlContent = `<p class="email">Email: {{data.email}}</p>
            <br><p class="mobile">Mobile: {{data.mobile}}</p>`;
    }
}

这只是我的要求的简单示例，实际情况有点复杂。 附上 stackblitz例如 URL。

Answer 1

假设:您将在加载数据后添加 html 内容。

然后只需替换这个:

this.htmlContent = `<p class="email">Email: {{data.email}}</p>
            <br><p class="mobile">Mobile: {{data.mobile}}</p>`;

与:

this.htmlContent = `<p class="email">Email: ${this.data.email}</p>
        <br><p class="mobile">Mobile: ${this.data.mobile}</p>`;

如果您使用 this.htmlContent 添加内容，则不需要使用数据绑定(bind)，因为您可以使用 javascript 模板文字的功能。