我创建了一个组件,使用 marked
包来渲染 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>
完美运行! :)
ng-content
在这里并不是最合适的选择吗?ng-content
有哪些适用的好例子呢? - Aviad P.<ng-content>
非常方便。比如在TabComponent
中,该组件的用户只需提供应在选项卡内展示的内容,而TabComponent
会根据当前选中的选项卡显示或隐藏它。在这种情况下,我认为<ng-content>
是一个不错的选择。MutationObserver
也很容易使用。 - Günter Zöchbauerng-content
的示例:https://dev59.com/2pPfa4cB1Zd3GeqPBU21#34951011。我同意Günter的看法。我认为插值在你的情况下已经足够了... - Thierry Templier