可能有一个简单的解决方法。我已经尝试了两种预期的解决方案来满足我的目标，即在启动 View 时沿 x 轴滚动到子组件。因为，我将这两个解决方案都放在我的子组件的 AfterViewInit 生命周期 Hook 中，以便在它启动时触发该函数。尽管在 AfterViewInit 生命周期 Hook 中为它们提供了非常好的元素，但到目前为止，这两种解决方案都失败了。没有编译时或运行时错误。
在控制台中我看到我的控制台日志(引用下面的代码):
new-user-req.component.ts:27 ElementRef {nativeElement: div.blade-header}
Element.scrollIntoView()
解决方案 2:
window.scrollTo(4000, 0)
这个也没用... window.scrollBy(window.innerWidth, 0);
注意: 我实际上是从父级的父级激活这个级联，因为新用户信息是默认的。因此，当我打开新用户时，我正在从父/父用户管理中打开新用户请求...。考虑到功能实际上位于子级并且元素被正确引用，我觉得这无关紧要；但是，如果您想要 parent 代码，请告诉我。
另请注意: 解决方案 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
<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
<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
<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
<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>
最佳答案
只需根据@Ryan 的建议添加 .nativeElement
this.scroll.nativeElement.scrollIntoView({ behavior: 'smooth' });
关于javascript - 在 Angular 6 中自动滚动到组件 AfterViewInit，不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50627673/