如何检测角2中div的内部html更改？

Question

我有这样

@Component({ 
    selector: 'my-component', 
    template: '<div id="myDiv">Some value comes here dynamically from server</div>', 
}) 
class MyComponent implements OnInit { 
@Input() 

    ngOnInit() { 
     //execute my function when a content change is occured in #myDiv  
    }); 
} 
} 

一个组成部分，如果发生在内容更改“#myDiv”我要执行的功能。 我该如何实现此功能？ 我也尝试了（改变）事件的角度。

Answer 1

尽管它看起来很简单，但它可以通过使用子组件和输入，输出变量来实现。

子组件，用于显示从服务内容

@Component({ 
    selector: 'title', 
    template: ` 
    <div> {{title}}</div> 
    `, 
}) 
export class TitleComponent implements ngOnChanges{ 

    @Input() title:string=""; 
    @Output() titleChanged:EventEmitter<string>=new EventEmitter<string>(); 
    constructor(){ 
    //service call goes here 
    } 
    ngOnChanges(){ 
    console.log(this.val); 
    this.titleChanged.emit(this.title); 
    } 

} 

父组件将作为

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <title (titleChanged)="changedTitle($event)" [title]="title"></title> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    title:string="some title"; 
    val:string; 
    constructor() { 
    this.val=""; 

    } 

    changedTitle(va){ 
    console.log(va); 

    } 
} 

说明：

1. 当服务呼叫提出，而标题值变改变。
2. 在更改输入属性时，ngOnChanges将自动触发。
3. The titleChanged是Output（）变量，并在执行ngOnChanges时发出一个值。
4. 当titleChanged被触发时，将会执行changedTitle（）中的关联方法。

LIVE DEMO

注：为了显示这个工作我已经使用了文本框，并将其分配给div元素。