バックエンドから返される変数の中にHTMLコードを渡す方法

Question

私は、サーバーからフロントエンドに変数内にhtmlコードを渡しています。 しかし、私はレンダリングする必要があるhtmlの代わりに、コード自体のテキストを取得しています。ここでは一例を示すサンプル・コードは次のとおりです。

HTMLコードは、バックエンドから返さ：

フロントエンド

<span style="background-color:#ffffff; padding:3px 11px; margin: 5px; border-radius: 4px;">{{y.img}}</span>

Answer 1

で行われたバインディングimg = '<a href="someLink" class="avatar"><img src="./assets/mira.png" class="img1" /></a>';

はこれを試してみてください：

@Component({ 
    selector: 'example', 
    template: ` 
       <span style="background-color:#ffffff; padding:3px 11px; margin: 5px; border-radius: 4px;" 
        [innerHTML]="img"> 
       </span>`, 
}) 
export class Example { 

    private img = ''; 

    constructor() { 
    // mocked data returned from the server 
    this.img = '<a href="someLink" class="avatar"><img src="./assets/mira.png" class="img1" /></a>'; 
    } 

} 

ここでのアイデアは、補間を使用する代わりにinnerHTMLをバインドして、DOM構造を変更し、必要なリンクをバックエンドから返すようにすることです。