Angular中的@ViewChild装饰器用于查询子组件、指令或本地元素。当使用它们时，可能会遇到一些问题，特别是与本地元素有关的问题。

一个常见的@ViewChild问题是无法访问native element。通常情况下，我们可以使用ViewChild访问组件的本地元素，但是在某些情况下，我们需要访问本地元素的原生DOM元素。例如，在以下代码中，我们想访问焦点所在元素的scrollTop属性：

@Component({
  selector: 'app-example',
  template: `

             
Here is the content
             
`
})
export class ExampleComponent {
   @ViewChild('divElement') divElement: ElementRef;

   onScroll() {
     console.log(this.divElement.nativeElement.scrollTop);
   }
}

但是，这种方式可能会导致以下错误：TypeError: Cannot read property 'scrollTop' of undefined。

为了解决这个问题，我们需要使用投影注入（Projection Injection）。投影注入是Angular元素的实际DOM结构注入到模板中。在本地元素上使用projection注入指令将本地元素的实际DOM结构注入到模板中。然后，我们就可以在代码中使用原生指令来访问它们。

下面是改写后的代码：

@Component({
  selector: 'app-example',
  template: `

             
Here is the content
             
             `
})
export class ExampleComponent implements AfterViewInit {
    @ViewChild('divElement', {read: ElementRef}) divElementRef: ElementRef;

    ngAfterViewInit() {
        const divElement = this.divElementRef.nativeElement;
        divElement.addEventListener('scroll', () => {
            console.log(divElement.scrollTop);
        });
    }
}

在这个例子中，我们通过在本地元素上添加元素来使用投影注入。然后，我们在ViewChild装饰器中使用{read: ElementRef}选项来指定我们想要注入原生DOM元素。

在ngAfterViewInit生命周期钩子中，我们访问元素的nativeElement属性并添加滚动事件监听器。现在，我们可以访问原生DOM元素并查看scrollTop