angular2属性包含D​​OM的模板绑定 [英] angular2 property contains dom in template binding

问题描述

我想在angular2应用程序显示来自字preSS网站的数据，字preSS这篇文章的内容可以包含DOM元素，但我想渲染它，而不是显示它作为一个文本。

我使用REST API V2插件摆脱字preSS的职位。

Home.ts

\r

\r

从'angular2 / angular2进口{组件，NgFor};\r
从angular2 / HTTP'进口{HTTP，HTTP_PROVIDERS};\r
进口{RouterLink，ROUTER_DIRECTIVES，RouteConfig}从'angular2 /路由器;\r
\r
\r
@零件（{\r
选择：'家'，\r
viewProviders：[HTTP_PROVIDERS]\r
templateUrl：./app/home/home.html'，\r
  指令：[NgFor，ROUTER_DIRECTIVES]\r
}）\r
出口类HomeCmp {\r
帖子：数组＆LT;任何取代;\r
构造函数（HTTP：HTTP）{\r
http.get（的http：//本地主机/ wptest / WP-JSON / WP / V2 /帖'）.subscribe（RES =＆GT; {\r
this.posts =＆LT;＆任何GT; res.json（）;\r
}）;\r
}\r
}

\r

＆LT; H1＆GT;我的主​​页＆LT; / H1＆GT;\r
\r
＆LT; UL＆GT;\r
  ＆LT;李* NG-的= =类项目后＆GT的帖子后＃;\r
    ＆LT; A [路由器链接] =['/邮报，{ID：post.id}]＆GT;\r
      ＆LT; H3类=称号后＆GT;\r
      {{post.title.rendered}}\r
    ＆LT; / H3 GT＆;\r
      ＆LT; p =类节选后＆GT;\r
        {{post.excerpt.rendered}}\r
      ＆所述; / P＆GT;\r
      ＆LT; D​​IV CLASS =后缩略图＆GT;＆LT; / DIV＆GT;\r
    ＆所述; / A＆GT;\r
  ＆LT; /李＆GT;\r
＆LT; / UL＆GT;

\r

\r

\r

解决方案

 ＆LT; p =班后摘录[内HTML] =post.excerpt.rendered＆GT ;＆所述; / p＆GT;
 

由埃里克·马丁内斯回答

I'm trying to displaying data from wordpress site in angular2 app, the wordpress post's content can contain DOM elements, but I want to render it instead of displaying it as a text.

I'm using rest API V2 plugin to get the posts from wordpress.

Home.ts

import {Component, NgFor} from 'angular2/angular2';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {RouterLink, ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';


@Component({
	selector: 'home',
	viewProviders: [HTTP_PROVIDERS],
	templateUrl: './app/home/home.html',
  	directives: [NgFor, ROUTER_DIRECTIVES]
})
export class HomeCmp {
	posts: Array<any>;
	constructor(http: Http) {
		http.get('http://localhost/wptest/wp-json/wp/v2/posts').subscribe(res => {
			this.posts = <any>res.json();
		});
	}
}

<h1>I'm home page</h1>

<ul>
  <li *ng-for="#post of posts" class="post-item">
    <a [router-link]="['/Post', {id: post.id}]">
      <h3 class="post-title">
      {{post.title.rendered}}
    </h3>
      <p class="post-excerpt">
        {{post.excerpt.rendered}}
      </p>
      <div class="post-thumbnail"></div>
    </a>
  </li>
</ul>

解决方案

<p class="post-excerpt" [inner-html]="post.excerpt.rendered"></p>

Answered by Eric Martinez

这篇关于angular2属性包含D​​OM的模板绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！