Javascript Angular2服务呈现HTML

学习Angular2教程。挑战在于创建一个“tweet”组件，该组件使用“tweet”服务检索其帖子

该服务将返回一组硬编码的tweet。这只是为了锻炼身体；显然不是效率。但是，该服务只能返回一个字符串数组，因此我不确定如何返回一个HTML数组，然后在视图中呈现为HTML而不是文本。我已经阅读并看到，当然有更好的方法来实现这一点，而不是通过服务，也许是通过指令。然而，这就是挑战所在

这就是我到目前为止想到的。视图将来自服务的tweet数组呈现为文本。当我使用返回按计划呈现的字符串数组的服务对其进行测试时，其他一切都正常工作

app.component.ts：

import {Component} from 'angular2/core';

import {TweetComponent} from './tweet.component'

@Component({
    selector: 'my-app',
    template: `
        <tweet></tweet>
    `,
    directives: [TweetComponent]
})
export class AppComponent { 

}

import {Component} from 'angular2/core'
import {TweetService} from './tweet.service'
@Component ({
    selector: 'tweet',
    template: `
    <li *ngFor="#tweet of tweets">
        {{tweet}}
    </li>

    `,

    providers: [TweetService]
})

export class TweetComponent {
    tweets;
    constructor(tweetService: TweetService){
    this.tweets = tweetService.getTweets();
} 
}

从'angular2/core'导入{Component}；
从“./tweet.component”导入{TweetComponent}
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
指令：[tweet组件]
})
导出类AppComponent{
}

tweet.component.ts：

import {Component} from 'angular2/core';

import {TweetComponent} from './tweet.component'

@Component({
    selector: 'my-app',
    template: `
        <tweet></tweet>
    `,
    directives: [TweetComponent]
})
export class AppComponent { 

}

import {Component} from 'angular2/core'
import {TweetService} from './tweet.service'
@Component ({
    selector: 'tweet',
    template: `
    <li *ngFor="#tweet of tweets">
        {{tweet}}
    </li>

    `,

    providers: [TweetService]
})

export class TweetComponent {
    tweets;
    constructor(tweetService: TweetService){
    this.tweets = tweetService.getTweets();
} 
}

从'angular2/core'导入{Component}
从“./tweet.service”导入{TweetService}
@组成部分({
选择器：“tweet”，
模板：`

{{tweet}

`,
提供者：[推特服务]
})
导出类tweet组件{
推特；
构造函数（tweetService:tweetService）{
this.tweets=tweetService.getTweets（）；
} 
}

tweet.service.ts：

export class TweetService {
    getTweets() {
        return [`
        <div class="media">
         <div class="media-left">
        <a href="#">
          <img class="media-object" src="http://lorempixel.com/100/100/people/?1" alt="...">

        </a>
        </div>
      <div class="media-body">
        <h4 class="media-heading">Tweet 1<br>Media Title 1?<br><like></like></h4>
      </div>
    </div>
       `,
        `
        <div class="media">
         <div class="media-left">
        <a href="#">
          <img class="media-object" src="http://lorempixel.com/100/100/people/?2" alt="...">

        </a>
        </div>
      <div class="media-body">
        <h4 class="media-heading">Tweet 2<br>Media Title 2<br><like></like></h4>
      </div>
    </div>`
        ];
    }
    }

导出类tweet服务{
getTweets（）{
返回[`
推特1
媒体标题1？

`,
`
推特2
媒体标题2

`
];
}
}

在tweet.component.ts中使用innerHTML：

import {Component} from 'angular2/core'
import {TweetService} from './tweet.service'
@Component ({
    selector: 'tweet',
    template: `
    <li *ngFor="#tweet of tweets">
        <span [innerHTML]="tweet"></span>
    </li>

    `,
    providers: [TweetService]
})

从'angular2/core'导入{Component}
从“./tweet.service”导入{TweetService}
@组成部分({
选择器：“tweet”，
模板：`


`,
提供者：[推特服务]
})

顺便说一下，如果您使用的是较新的angular2版本，您应该更改

<li *ngFor="#tweet of tweets">

到

Hey，可能重复：只需使用

innerHTML

或

outerHTML

propertyServices通常不会返回HTML。我建议您将HTML放入TweetComponent的模板中——在ngFor循环中。从服务返回对象数组。每个对象都应该包含填写ngFor模板所需的数据。明白了。在这种情况下，我实际上不知道如何使用对象。我接受了您的建议，并将html放在组件中。我尝试以字符串的形式返回tweet数组，比如[“tweet1”，“tweet2”]。然后，我将{{tweet}}插入我想要的tweet位置，这很有效。但是，我不太明白如何使用对象对多个属性执行此操作。我猜插值可能类似于{{tweet.property}？@AlfonsoGiron服务只关注数据而不关注视图部分，因为服务需要注入任何其他组件，您能给我看一下

tweet的完整代码吗？服务

运行良好谢谢。你知道我如何返回一个对象数组，然后使用插值。例如，{{title}}表示姿势的标题，然后{{tweet}表示实际的tweet，然后甚至可能{[src}插入图像。因此标题可以是“title1”、“title2”，等等。对于tweet和src也是如此。返回数组看起来如何？所以我猜插值类似于{tweet.property}或者如此。在tweet.service.ts中返回一个对象数组，如return[{title:'title1'，html:'…}，{title:'title1'，html:'…}]；然后在模板中可以使用tweet.html或tweet.title等。