angular – 如何检测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>

完美的工作！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!