Angular 使用父级上的指令获取嵌套元素_Angular_Angular Directive

Angular 使用父级上的指令获取嵌套元素

angular

Angular 使用父级上的指令获取嵌套元素,angular,angular-directive,Angular,Angular Directive,这是我的代码 <parent my-directive [toHide]="childRef"> <child bottom right #childRef> <button>Some text </button> </child > </parent > 正如您所看到的，我正在使用this.renderer设置元素的样式，但是我得到了以下结果 export class MyDirective { @I

这是我的代码

<parent my-directive [toHide]="childRef">

 <child bottom right #childRef>
    <button>Some text </button>
 </child >

</parent >

正如您所看到的，我正在使用

this.renderer

设置元素的样式，但是我得到了以下结果

export class MyDirective {
  @Input("toHide") localRef;

  constructor(public element:ElementRef,public renderer:Renderer) {
    console.log('Hello MyDirective Directive');
  }

  ngAfterViewInit() {
    console.log("All Transtition set");
    console.log(this.localRef);
this.renderer.setElementStyle(this.localRef, 'webkitTransition', 'transform 500ms,top 500ms');
  }

错误错误：未捕获（承诺中）：TypeError:el.style未定义

这方面的任何帮助都是值得的。

如果

是一个普通的HTML元素（没有组件），那么它应该可以工作（添加了

nativeElement

）

this.renderer.setElementStyle(
this.localRef.nativeElement，“WebKittTransition”，“transform 500ms，top 500ms”）；

如果

是一个角度分量，请更改此行

@Input（“toHide”）localRef；

到

@ContentChild（'childRef'，{read:ElementRef}）localRef；

并删除[toHide]=“childRef”

如果元素包含模板变量是一个普通HTML元素，读取引用将返回一个

ElementRef

，可以使用

nativeElement

属性访问实际元素

如果它是一个组件或承载一个指令，那么读取引用将返回无法用于访问DOM元素的组件或指令实例

@ViewChild（ren）

和

@ContentChild（ren）

允许使用

read

参数指定从模板变量引用返回的内容，但从模板内访问模板变量引用并不提供这一点

但是我建议使用

@HostBinding（'class.is transition'）
isTransition：布尔值为false；

在指令中使用CSS，如

父[主机指令]>子{
-webkit转换：转换500毫秒，顶部500毫秒；
}

应用样式。

如果

是纯HTML元素（无组件），则这应该可以工作（添加了

nativeElement

）

this.renderer.setElementStyle(
this.localRef.nativeElement，“WebKittTransition”，“transform 500ms，top 500ms”）；

如果