Question

完成Angular2教程。挑战在于创建一个“推文”组件，该组件使用“推文”服务来检索其帖子。

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

这是我到目前为止所提出的。该视图将来自服务的推文数组呈现为文本。其他所有工作正常，因为我测试它的服务返回一个按计划呈现的字符串数组。

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 { 

}

tweet.component.ts：

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();
} 
}

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>`
        ];
    }
    }

Answer 1

在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版本，你应该改变

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

到

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

Angular2服务呈现HTML

1 个答案: