Typescript angular2：操纵指令外部的元素

我正在尝试访问当前指令元素之外的DOM元素。。对于类似调整大小的行为，请使用外部元素作为句柄，并且不要对目标标记进行太多更改，特别是不要使用类似转换的

我现在所做的是我认为有点不正常的事情，比如使用

BrowserDomAdapter

：

模板如下所示：

。。。
... 

您可以使用模板变量：

@Input('resizable-handle') resizableSelector: ElementRef;

<a [resizable-handle]="target-container"> ... </a>
<!-- ...somewhere further, on a different level, the target I don't want to touch in order to get this working... -->
<div #target-container> ... </div>

@Input（'resizable-handle'）可调整大小的选择器：ElementRef；
... 
... 

我将使用应用于直接在目标上执行实际操作的目标元素的指令

然后可以使用构造函数注入它。这总是从找到该指令的最近父级注入

@指令({
选择器：“[可调整大小的目标]”，
主机：{'[style.border]'：'border'}，
})
导出类可调整大小的目标{
//更改样式只是为了证明此指令可以被操纵
边框：string=“实心3px蓝色”；
@已到达HostBinding（'class.reach'）：boolean=false；
}

@指令({
选择器：“[可调整大小的句柄]”，
})
导出类ResizeableHandle{
//注入目标
构造函数（私有_目标：resizebletarget）{}
@HostListener（'mousedown'，['$event']））
startResize（e:MouseeEvent）{
//调用方法或设置属性以操作目标
这是。_target.reacted=true；
这是。_target.border=“实心3px红色”；
}
}

@组件({
选择器：“我的应用程序”，
指令：[ResizeableTarget，ResizeableHandle]，
模板：`
你好
一些内容
手柄
`,
})
导出类AppComponent{
}

谢谢

根据您关于模板变量的建议，我设计了此解决方案：

@指令
({
选择器：“[可调整大小的句柄]”，
主机：{（单击）:'emitHeight（）'}
})
导出类ResizeableHandle
{
@输入（“可调整大小的句柄”）可调整大小的选择器：ElementRef；
@Input（）targetLight：任意；
@Output（）targetLightChange=新事件发射器（）；
emitHeight（）{this.targetLightChange.emit（100）}
}
@组成部分
({
选择器：“我的应用程序”，
指令：[调整大小句柄]，
模板：`
你好
... 
`
})
导出类AppComponent
{
公共集装箱高度=25；
} 

也谢谢。我使用父指令构建了另一个解决方案；这是因为句柄和目标实际上不在同一棵树中，所以我需要一个“根”来通信

@指令（{选择器：'[可调整大小的句柄]'}）
导出类ResizeableHandle
{
构造函数（@Host（）@Inject（forwardRef（（）=>resizeable））private _resizeable:resizeable）{
//模拟在此处放置调整大小的控制柄
@HostListener（'单击'，['$event']））
emitHeight（）{this._resizeable.change=Math.max（Math.random（）*100,25）；}
}
@指令（{选择器：'[可调整大小的目标]'}）
导出类可调整大小的目标
{
构造函数（@Host（）@Inject（forwardRef（（）=>resizeable））private _resizeable:resizeable）
{
this._resizeable.change.subscribe（c=>this.height=c）；
}
@主机绑定（'style.height.px'）公共高度；
}
@指令（{选择器：'[Resizeable]'}）
可调整大小的导出类
{
私人变更：编号；
private_observeChange：可观察的；
构造函数（）
{
this.\u observeChange=observeable.create（observator=>this.\u change=observator.share（）；
}
设置更改（值）{this.\u change.next（值）}
get change（）{返回此值。_observeChange；}
}
@组成部分
({
选择器：“我的应用程序”，
指令：[ResizableHandle，ResizableTarget，Resizable]，
模板：`

A.
B
`,
})
导出类AppComponent{}

---

不行，我不想直接使用

文档。我使用的是
browsedomadapter
，因为我可能会使用另一种类型的浏览器，或者在某个时候使用完全不同的东西。。。但我认为即使是这样，对于便携性来说也是不可靠的。我在考虑在框架内使用其他范例。。。我不知道..你的
有什么问题？
<a [resizable-handle]="'.target-container'"> ... </a>
<!-- ...somewhere further, on a different level, the target I don't want to touch in order to get this working... -->
<div class="target-container"> ... </div>

@Input('resizable-handle') resizableSelector: ElementRef;

<a [resizable-handle]="target-container"> ... </a>
<!-- ...somewhere further, on a different level, the target I don't want to touch in order to get this working... -->
<div #target-container> ... </div>