Angular 角度-获取嵌套组件html引用

我有一个嵌套在组件中的组件

myComponent

，如何从外部组件获取嵌套组件的宽度

<div class="container">            
  <myComponent[compObj]="someObj"></myComponent>
</div>

---

您可以在子组件中添加一个getter来获取宽度：

export class MyComponent {
  constructor(private el: ElementRef) { }

  public get width(): number {
    // Get the width however you like
    return this.el.nativeElement.getBoundingClientRect().width;
  }
}

然后在父级中访问该组件的getter：

export class OuterComponent {
  @ViewChild(MyComponent) child: MyComponent;

  ngAfterViewInit() {
    let width = this.child.width;
  }
}

---

您可以在子组件中添加一个getter来获取宽度：

export class MyComponent {
  constructor(private el: ElementRef) { }

  public get width(): number {
    // Get the width however you like
    return this.el.nativeElement.getBoundingClientRect().width;
  }
}

然后在父级中访问该组件的getter：

export class OuterComponent {
  @ViewChild(MyComponent) child: MyComponent;

  ngAfterViewInit() {
    let width = this.child.width;
  }
}

---

我将创建一个通用指令，将元素宽度作为表达式公开给模板。您可以在以后再次使用它，因为您将再次遇到问题

@Directive({
    selector: 'on-width'
})
export class OnWidthDirective implements DoCheck {
   @Output('on-width')
   public widths: EventEmitter<number> = new EventEmitter();

   private _lastWidth: number;

   public constructor(private el: ElementRef) {}

   public ngDoCheck(): void {
      const w = this.el.nativeElement.getBoundingClientRect().width;
      if(this._lastWidth !== w) {
          this.widths.next(w);
          this._lastWidth = w;
      }
   }
}

@指令({
选择器：“在宽度上”
})
导出类OnWidthDirective实现了DoCheck{
@输出（'on-width'）
公共宽度：EventEmitter=neweventemitter（）；
私有_lastWidth:数字；
公共构造函数（私有el:ElementRef）{}
public ngDoCheck（）：void{
const w=this.el.nativeElement.getBoundingClientRect（）.width；
如果（此._lastWidth！==w）{
这个。宽度。下一个（w）；
这是.\u lastWidth=w；
}
}
}

现在，在OutterComponent的模板中，您可以侦听任何模板元素上的宽度更改

@Component({
    template: '<child-thing (on-width)="onWidth($event)"></child-thing>'
})
export class OuterComponent {
    public onWidth(width: number) {
       console.log(width); // called when child resizes
    }
}

@组件({
模板：“”
})
导出类外部组件{
公共宽度（宽度：数字）{
console.log（宽度）；//在子级调整大小时调用
}
}

我将创建一个通用指令，将元素宽度作为表达式公开给模板。您可以在以后再次使用它，因为您将再次遇到问题

@Directive({
    selector: 'on-width'
})
export class OnWidthDirective implements DoCheck {
   @Output('on-width')
   public widths: EventEmitter<number> = new EventEmitter();

   private _lastWidth: number;

   public constructor(private el: ElementRef) {}

   public ngDoCheck(): void {
      const w = this.el.nativeElement.getBoundingClientRect().width;
      if(this._lastWidth !== w) {
          this.widths.next(w);
          this._lastWidth = w;
      }
   }
}

@指令({
选择器：“在宽度上”
})
导出类OnWidthDirective实现了DoCheck{
@输出（'on-width'）
公共宽度：EventEmitter=neweventemitter（）；
私有_lastWidth:数字；
公共构造函数（私有el:ElementRef）{}
public ngDoCheck（）：void{
const w=this.el.nativeElement.getBoundingClientRect（）.width；
如果（此._lastWidth！==w）{
这个。宽度。下一个（w）；
这是.\u lastWidth=w；
}
}
}

现在，在OutterComponent的模板中，您可以侦听任何模板元素上的宽度更改

@Component({
    template: '<child-thing (on-width)="onWidth($event)"></child-thing>'
})
export class OuterComponent {
    public onWidth(width: number) {
       console.log(width); // called when child resizes
    }
}

@组件({
模板：“”
})
导出类外部组件{
公共宽度（宽度：数字）{
console.log（宽度）；//在子级调整大小时调用
}
}

Nice implementation:）我从类似的东西开始，但改变了方向，因为我认为每次检查时的宽度计算可能太昂贵。但现在我想我可能是过早地优化了。很好的实现：）我从类似的东西开始，但改变了方向，因为我认为每次检查时的宽度计算可能太昂贵了。但现在我想我可能是过早地优化了。