我制作了一个使用marked包来呈现降价内容的组件，事实是当异步事件更改其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>
完美的作品！:)
添加@Input() content;和使用类似的组件
<markdown [content]="info"></markdown>
会更容易。
另外，对于此特定用例，MutationObserver应该可以很好地工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句