コンポーネントの現在のバインドされたテンプレートマークアップを取得する

Question

データバインドされたテンプレートを持つAngular 2コンポーネントは、内部マークアップの現在の状態の文字列を取得できますか？

例：コンポーネントMyComponentのテンプレート

<div>{{foo}}</div> 

を持っており、MyComponent.fooが

"こんにちは" の現在の値を持つ場合 は私が

<div>Hello</div> 

が含まれていMyComponentの中の文字列を取得することができます

？ ループなどのより複雑なバインディングの例でも機能するはずです。

私はそれがかなり簡単なはずです。 innerHTMLを取得するが、私はこれを行う "クリーンな"方法は何か分からない。

は、事前にありがとう

Answer 1

あなたがElementRefを使用してみた場合、私は知りませんが、これは私のために働いています

import {Component, OnInit, ElementRef} from '@angular/core'; 

{ Component, ElementRef } from '@angular2/core'; 
     @Component({ 
       selector: 'my-app', 
       template: ` 
       <p>Hello World</p> 
       {{title}} 
       ` 
    }) 

export class MyAppComponent { 

constructor(private el: ElementRef) {} 

ngOnInit() { 
    var html = this.el.nativeElement.InnerHtml; 
} 

Answer 2

私はそれのためディレクティブを作ると思いますだからどこでも使える。また、ループでも動作します。

注：だけの要素をクリックして、ブラウザのコンソールをご確認ください。

---

ワーキングDEMO：https://plnkr.co/edit/yYVMXQT5SfjpCThF6sp7?p=preview

import { Component,Directive,ElementRef,Renderer } from '@angular/core'; 

@Directive({ 
    selector:'[fetchHTML]', 
    host: { 
    '(click)':'GetInnerHTML()', 
    }, 
}) 

export class GetInnerHTML{ 

    constructor(private el:ElementRef,private rd: Renderer){} 

    GetInnerHTML() 
    { 
    console.log(this.el.nativeElement.innerHTML); 
    } 
} 

---

import { Component } from '@angular/core'; 
import {service} from './service'; 
@Component({ 
    selector: 'my-app', 

    template: ` 
    <p fetchHTML>Hello</p> 

    <div *ngFor="let m of data" fetchHTML>{{m}}</div> 
    ` 

}) 
export class AppComponent { 
    data=["one","two","three"]; 
}