角度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

単純なように見えますが、子コンポーネントと入力変数、出力変数を使用して実現できます。サービスコールが行われ、タイトル値が取得されると

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

   説明のようになりますかわった。

2. 入力プロパティが変更されると、ngOnChangesが自動的にトリガされます。
3. titleChangedはOutput（）変数で、ngOnChangesが実行されたときに値を出力します。
4. titleChangedがトリガされると、changedTitle（）の関連するメソッドが実行されます。

LIVE DEMO

注：私は、テキストボックスを使用していた作業とdiv要素に代入され、これを示すために。