如何使用angular 2检测div中的内部html更改？_Angular_Typescript

如何使用angular 2检测div中的内部html更改？

angular typescript

如何使用angular 2检测div中的内部html更改？,angular,typescript,Angular,Typescript,我有一个像 @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

我有一个像

@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      
  });
 }
}

@组件({
选择器：“我的组件”，
模板：'一些值从服务器动态传入'，
})
类MyComponent实现OnInit{
@输入（）
恩戈尼尼特（）{
//在#myDiv中发生内容更改时执行我的函数
});
}
}

如果“#myDiv”中发生了内容更改，我想执行一个函数。如何实现此功能？

我还尝试了（改变）事件的角度

虽然它看起来很简单，但可以使用子组件和输入、输出变量来实现

用于显示服务内容的子组件

@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);
  } 

}

@组件({
选择器：“标题”，
模板：`
{{title}}
`,
})
导出类标题组件实现ngOnChanges{
@输入（）标题：string=“”；
@Output（）标题更改：EventEmitter=neweventemitter（）；
构造函数（）{
//服务电话在这里
}
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);

  }
}

@组件({
选择器：“我的应用程序”，
模板：`
你好{{name}
`,
})
导出类应用程序{
名称：字符串；
title:string=“some title”；
val：字符串；
构造函数（）{
这个。val=“”；
}
更改标题（va）{
控制台日志（va）；
}
}

说明：

当发出服务调用且标题值更改时

更改输入属性时，ngOnChanges将自动触发

titleChanged是Output（）变量，在执行ongonchanges时发出一个值

触发标题更改时，将执行changedTitle（）中的关联方法

注意：为了说明这是有效的，我使用了一个文本框并将其分配给div元素。