在Angular 6中自动滚动到component AfterViewInit，无法正常工作

Question

这个问题可能有一个简单的解决办法。我已经尝试了两种预期的解决方案，以满足我的目标，即在视图启动时沿x轴滚动到子组件。对于，我将这两个解决方案都放在我的子组件的AfterViewInit生命周期钩子中，以便在它启动时触发函数。到目前为止，这两种解决方案都失败了，尽管在AfterViewInit生命周期钩子中提供了非常好的元素。没有编译时或运行时错误。

在控制台中，我看到了我的控制台日志(参见下面的代码)：

new-user-req.component.ts:27 ElementRef {nativeElement: div.blade-header}

Solution 1:

Element.scrollIntoView()

解决方案2：

window.scrollTo(4000, 0)

这也不管用。window.scrollBy(window.innerWidth，0)；

注意:因为new-user-info是默认的，所以我实际上是从父级的父级激活这个级联。因此，当我打开new-user时，我打开的是来自父/父用户管理的new-user-req ...我觉得这并不重要，因为功能实际上驻留在子元素中，并且元素被正确引用；但是，如果您想要父/父代码，请让我知道。

另请注意:解决方案3:询问我是否指的是scrollTo

window.scrollTo + 20;

谢谢!

子组件(new-user-req.component)：相关：

   @ViewChild('next') scroll;
      ngAfterViewInit() {
        console.log(this.scroll)
        // this.scroll.scrollIntoView({ behavior: 'smooth' });
        // window.scrollTo(4000, 0);
        // window.scrollLeft = 20
        window.scrollBy(4000, 0);
      }

_

import { EventEmitter, ViewChild, AfterViewInit } from '@angular/core';
import { Component, OnInit, Output } from '@angular/core';
import { slideToRight } from '../../../../router.animations';
import { Router, ActivatedRoute, UrlSegment, NavigationEnd } from '@angular/router';

@Component({
  selector: 'new-user-req',
  templateUrl: './new-user-req.component.html',
  styleUrls: ['./new-user-req.component.css'],
  animations: [slideToRight()]
})
export class NewUserReqComponent implements OnInit, AfterViewInit {


  @ViewChild('next') scroll;

  constructor() {

  }

  ngOnInit(): void {

  }


  ngAfterViewInit() {
    console.log(this.scroll)
    // this.scroll.scrollIntoView({ behavior: 'smooth' });
    // window.scrollTo(4000, 0);
    // window.scrollLeft = 20
    window.scrollBy(4000, 0);
  }

}

子模板：

相关的：

<div #next class="blade-header">

_

  <div class="blade" [@routerTransition]>
      <div #next class="blade-header">
        <h3>USER INFORMATION</h3>
        <div class="window-functions">
          <i class="fa fa-window-minimize"></i>
          <i class="fa fa-window-restore"></i>
          <i class="fa fa-window-maximize"></i>
          <a>
            <i class="fa fa-window-close"></i>
          </a>
        </div>
      </div>
      <form action="submit">
        User type:
        <br>
        <select required>
          <option value="" hidden disabled selected data-default></option>
          <option value="Customer">Customer</option>
          <option value="Organization Administrator">Organization Administrator</option>
          <option value="Customer Service Representative">Customer Service Representative</option>
          <option value="Customer Service Administrator">Customer Service Administrator</option>
        </select>
        <br>
        <br> First name:
        <br>
        <input required type="text" name="firstname" value="Richard">
        <br>
        <br> Last name:
        <br>
        <input required type="text" name="lastname" value="Dawkins">
        <br>
        <br> Cell phone:
        <br>
        <input required type="tel" name="cellphone" value="(585) 271-8888">
        <br>
        <br> Office phone:
        <br>
        <input required type="tel" name="officephone" value="(585) 271-8887">
        <br>
        <br> Fax:
        <br>
        <input type="tel" name="fax" value="(585) 271-8886">
        <br>
        <br> City:
        <br>
        <input required type="text" name="city" value="City">
        <br>
        <br> State:
        <br>
        <input required type="text" name="state" value="New York">
        <br>
        <br> Requester title:
        <br>
        <input required type="text" name="requester" value="Requester title">
        <br>
        <br>

        <!-- <div *ngIf="newUserInfoValidState; else allowOrgInput">
            <a [routerLink]="['../',{ outlets: { newuserorginfo: ['newuserorginfo'] } } ]" routerLinkActive='router-link-active'>
            <button autofocus class="next-button">Next</button>
          </a>
        </div> -->
    <!-- <ng-template #allowOrgInput> -->
    <a>
      <button autofocus class="next-button" disabled>Next</button>
    </a>
    <!-- </ng-template> -->


  </form>
</div>
<router-outlet></router-outlet>
<router-outlet name="newuserorginfo"></router-outlet>

父模板

<!-- <app-page-header [icon]="'fa fa-users'"></app-page-header> -->
<!-- <app-page-header [heading]="'User Management'" [icon]="'fa fa-users'"></app-page-header> -->



<!-- BLADE LAYER 1 -->
<div class="blade" [@routerTransition]>
  <div class="blade-header">
    <!-- <div class="blade-header" [ngClass]="{'is-minimized-header':minimizeVar}"> -->
    <h3>NEW USER REQUEST</h3>
  </div>


  <!-- [ngClass]="{'feature-nav-button': portalState =='portal-a', 'click-portal-style': portalState =='portal-a'}" -->

  <!-- BLADE Contents -->
  <div class="blade-contents">
    <div (click)="stateUserReq = 'userInfo';" [ngClass]="{'userManSelect': stateUserReq =='userInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='userInfo'}">1 </span> User Information &nbsp;
        <i class="fa fa-chevron-right"></i>
      </h4>
    </div>
    <div (click)="stateUserReq = 'orgInfo';" [ngClass]="{'userManSelect': stateUserReq =='orgInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='orgInfo'}">2 </span> Organization &nbsp;
        <i class="fa fa-chevron-right"></i>
      </h4>
    </div>
    <div (click)="stateUserReq = 'supInfo';" [ngClass]="{'userManSelect': stateUserReq =='supInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='supInfo'}">3 </span> Supervisor &nbsp;
        <i class="fa fa-chevron-right"></i>
      </h4>
    </div>
    <div (click)="stateUserReq = 'secInfo';" [ngClass]="{'userManSelect': stateUserReq =='secInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='secInfo'}">4 </span> Security Profiles &nbsp;
        <i class="fa fa-chevron-right"></i>
      </h4>
    </div>
  </div>
</div>

<div *ngIf="stateUserReq === 'userInfo'">
  <new-user-req></new-user-req>
</div>
<div *ngIf="stateUserReq === 'orgInfo'">
  <new-user-org-info></new-user-org-info>
</div>
<div *ngIf="stateUserReq === 'supInfo'">
  <new-user-supervisor-info></new-user-supervisor-info>
</div>
<div *ngIf="stateUserReq === 'secInfo'">
  <new-user-security-info></new-user-security-info>
</div>

Answer 1

根据@Ryan的建议添加.nativeElement即可。

this.scroll.nativeElement.scrollIntoView({ behavior: 'smooth' });

Answer 2

有类似的问题，我已经更新了下面的代码。现在它可以正常工作了

element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});