将元素组件内容中的数据传递给组件html声明

Question

我已成功将拖动，旋转和字体缩放实现到组件中。这是我用于拖动http://jsfiddle.net/Jjgmz/1/的逻辑（旋转和缩放的实现非常相似。）

我有一个看起来像这样的app.component.html：

  <app-text></app-text>

app-text在text.component.html中定义：

<div id="innerDiv" tabindex="-1" [ngStyle]="{'transform': currentRotation(), 'font-size.px':currentFontSize()}"  class="h unselected noselect"  contenteditable="false" (mousedown)="mousedown($event)" (mouseup)="mouseup($event)" (focusout)="focusout($event)" (blur)="focusout($event)" >
    Hello
  </div>

text.component.ts定义了currentRotation，currentFontSize，mousedown，mouseup，focusout函数。但是，只有app-text中的#innerDiv会被轮换并移动。 app-text标记元素始终位于同一位置。检查此图片：

我的问题是，如何将innerDiv的旋转位置值传递给app-text元素。例如，最终的app-text看起来像这样：

<app-text [ngStyle]="{'transform': currentRotationFromInnerDiv(), 'font-size.px':currentFontSizeFromInnerDiv()}"></app-text>

我想旋转，移动.. app-text而不是#innerDiv，但保留text.component.ts

中函数的逻辑

text.component.ts的模型看起来像这样：

data = {
rotation: 20,
offset:{120,400},
font-size:17
}

此“数据”包含我希望app-text元素使用的所有相关信息。