Angular 10 scrollTo 从 parent 组件到 child 组件中的元素 html

Question

parent html:

 <div>
  <button type="button" (click)="scroll(childelementTwo)">TO CHILD</button>
 </div>

 <div>
  <app-child>
 </div>

child html:

 <div>
    <div #childelementOne>
      lot of stuff
    </div>

    <div #childelementTwo>
     another lot of stuff
    </div>

   </div>

如果所有这些 html 代码都在“相同”中 component.html 我会使用此功能，但不会：

  scroll(el: HTMLElement) {
    el.scrollIntoView();
 }

那么：如何滚动到 child 组件中的 html 元素？

Answer 1

您可以为此使用 @ViewChildren。

List-Item:

@Component({
  selector: 'app-list-item',
  templateUrl: './list-item.component.html',
  styleUrls: ['./list-item.component.css']
})
export class ListItemComponent implements OnInit {

  @Input() list;

  constructor(private elRef: ElementRef) { }

  ngOnInit() {
  }

  scrollIntoView() {
    this.elRef.nativeElement.scrollIntoView();
  }

}

List-Component:

  @ViewChildren(ListItemComponent) viewChildren!: QueryList<ListItemComponent>;
  list = new Array(1000).fill(true)

  scrollTo() {
    this.viewChildren.toArray()[100].scrollIntoView()
  }

HTML:

<button (click)="scrollTo()">scroll to 100</button>
<app-list-item *ngFor="let item of list">
list works!
</app-list-item>

堆栈闪电战：https://stackblitz.com/edit/angular-ivy-6ccaav?file=src%2Fapp%2Fapp.component.html

Answer 2

Mat，您的“元素”在子级中，您希望在父级中进行控制。因此，首先使用 ViewChild

访问 child 中的元素

//in your child.component
@ViewChild("childelementOne") childelementOne;
@ViewChild("childelementTwo") childelementTwo;

那么在parent中你可以做

<div>
  <button type="button" (click)="scroll(childComponent.childelementTwo)">
       TO CHILD
   </button>
</div>

<div>
  <!--see that use a template reference variable to the childComponent-->
  <app-child #childComponent></app-child>
 </div>

 scroll(el: ElementRef) {
   el.nativeElement.scrollIntoView();
 }

看看我们如何在 .html 中使用 childComponent.childelementTwo。 childComponent是自己的组件app-child，childComponent.childelementTwo是我们在@ViewChild中得到的“变量”。按缺陷是一个 ElementRef。您可以使用 el.nativeElement 访问 HTMLElement。是的，使用模板引用我们可以访问您的 child.component

的所有 public 变量和 public 函数

我创建的 a stackblitz 看起来像 enno 回答中的 stackblitz，但发现完全不同

注意。您还可以在 child.component 中使用相同的 referenceVariable 并使用 ViewChildren，这样您就可以将 QueryList 和索引

传递给函数

Angular 10 scrollTo 从 parent 组件到 child 组件中的元素 html

Angular 10 scrollTo from parent component to an element in child component html

html

scroll

angular

angular10