我创建了一个使用标记包来呈现markdown内容的组件,当异步事件更改其ng-content元素时,它不会重新呈现自身.
这是代码
import {Component,ElementRef,AfterContentInit} from 'angular2/core';
declare var marked: any;
@Component({
selector: 'markdown',template:
'<div style="display:none;">' +
' <ng-content></ng-content>' +
'</div>' +
'<div class="markdown" [innerHTML]="output"></div>'
})
export class MarkdownComponent implements AfterContentInit {
output: string;
constructor(
private element: ElementRef) {
}
ngAfterContentInit() {
const c = this.element.nativeElement.childNodes;
this.output = marked(c[0].textContent);
}
}
这是HTML片段：
<markdown>{{info}}</markdown>
这是异步更新：
updateInfo(text: string) {
this.svc.update(this.info,text).subscribe(
data => this.info = data.newText);
}
问题是,当this.svc.update事件触发时,info变量会更改值,但markdown组件不会重新呈现.
谢谢！
解析度
按照接受的答案的建议(感谢Gunter),这是新组件,它更精简,更简单：
import {Component} from 'angular2/core';
declare var marked: any;
@Component({
selector: 'markdown',template: '<div class="markdown" [innerHTML]="process(md)"></div>',inputs: ['md']
})
export class MarkdownComponent {
md: string;
process(s: string) {
if (!s) return '';
return marked(s);
}
}
这是新的HTML：
<markdown [md]="info"></markdown>
完美的工作！ 原文链接：https://www.f2er.com/angularjs/143263.html
