Question

有HTML组件：

<div class="filter" #filterContainer>

在另一个组件中，我监听了主体滚动，并尝试将scrollTop应用于元素#filterContainer：

 export class SkeletonComponent implements OnInit, AfterViewInit, OnChanges {
      isSideBarOpen;

      @ViewChild("filterContainer", {
        read: ViewContainerRef,
        static: false
      })
      el: ElementRef;

      @HostListener("window:scroll", ["$event"])
      public scroll($event): void {
        let scrolled = $event.target.scrollingElement.scrollTop;
        console.log(this.el);
      }
    }

但是当事件触发时，我得到的console.log(this.el);是不确定的，为什么我不能访问元素#filterContainer？

Answer 1

仅在具有模板引用变量的组件中可见viewChild。（并且必须读取：ElementRef，而不是：ViewContainerRef

如果您的组件具有父级，则需要从该父级访问该组件，然后访问ViewChildren。是的，您可以使用父级的ViewChild（或带有模板引用）访问子级

例如我们的孩子

@Component({
  selector: 'hello',
  template: `<h1 #filterContainer>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
  @ViewChild('filterContainer',{static:false}) filterComponent
}

我们的父母

<hello #hello name="{{ name }}"></hello>
<button (click)="log(hello.filterComponent)">button</button>
<button (click)="log2()">button</button>

export class AppComponent  {
  name = 'Angular';
  @ViewChild(HelloComponent,{static:false}) hello
  //or
  //@ViewChild('hello',{static:false,read:HelloComponent}) hello

  log(element)
  {
    console.log(element.nativeElement.innerHTML)
  }
  log2()
  {
    console.log(this.hello.filterComponent)
  }
}

stackblitz

如何使用@ViewChild

1 个答案: