admin管理员组文章数量:1410705
there's probably a simple fix to this. I have tried two prospective solutions to satisfy my goal of scrolling along the x-axis to a child ponent upon initiation of the view. For, I put both of these solutions in the AfterViewInit lifecycle hook of my child ponent so that when it initiates the function will fire. Both of these solutions have failed so far despite feeding them perfectly good elements in the AfterViewInit lifecycle hook. There are no pile time or runtime errors.
In the console I see my console log (refer to code below):
new-user-reqponent.ts:27 ElementRef {nativeElement: div.blade-header}
Solution 1:
Element.scrollIntoView()
Solution 2:
window.scrollTo(4000, 0)
this didnt work either... window.scrollBy(window.innerWidth, 0);
Note: I am actually activating this cascade from the parent of the parent since new-user-info is default. So when I open new-user I am opening new-user-req from the parent/parent user-management.... I feel this shouldn't matter considering the functionality actually resides at the child and the element is being referenced properly; however, let me know if you want the parent/parent code.
Also Note: Solution 3: asks me whether I meant scrollTo
window.scrollTo + 20;
Thank you!
Child Component(new-user-reqponent): pertinent:
@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-reqponent.html',
styleUrls: ['./new-user-reqponent.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);
}
}
Child template:
pertinent:
<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>
Parent Template
<!-- <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>
there's probably a simple fix to this. I have tried two prospective solutions to satisfy my goal of scrolling along the x-axis to a child ponent upon initiation of the view. For, I put both of these solutions in the AfterViewInit lifecycle hook of my child ponent so that when it initiates the function will fire. Both of these solutions have failed so far despite feeding them perfectly good elements in the AfterViewInit lifecycle hook. There are no pile time or runtime errors.
In the console I see my console log (refer to code below):
new-user-req.ponent.ts:27 ElementRef {nativeElement: div.blade-header}
Solution 1:
Element.scrollIntoView()
Solution 2:
window.scrollTo(4000, 0)
this didnt work either... window.scrollBy(window.innerWidth, 0);
Note: I am actually activating this cascade from the parent of the parent since new-user-info is default. So when I open new-user I am opening new-user-req from the parent/parent user-management.... I feel this shouldn't matter considering the functionality actually resides at the child and the element is being referenced properly; however, let me know if you want the parent/parent code.
Also Note: Solution 3: asks me whether I meant scrollTo
window.scrollTo + 20;
Thank you!
Child Component(new-user-req.ponent): pertinent:
@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.ponent.html',
styleUrls: ['./new-user-req.ponent.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);
}
}
Child template:
pertinent:
<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>
Parent Template
<!-- <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 thanks, that did it! jsut add .nativeElement to the solutions. I guess this is a thing you have to do in Angular dom manipulation, sometimes... Haven't had to use it yet – imnickvaughn Commented May 31, 2018 at 15:28
- downvotes without explanation lol this is a good summation of auto-scroll solutions and probably a mon hangup as a regular web dev... so retarded haha I obviously did my research here and it's well written... nobody else will see this now and you will have to tell another person the same thing – imnickvaughn Commented May 31, 2018 at 15:42
2 Answers
Reset to default 2just add .nativeElement per @Ryan s suggestion
this.scroll.nativeElement.scrollIntoView({ behavior: 'smooth' });
Had similar problem, I've update with the below code. Now its working fine
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
本文标签： javascriptAuto scroll in Angular 6 to component AfterViewInitNot workingStack Overflow
版权声明：本文标题：javascript - Auto scroll in Angular 6 to component AfterViewInit, not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744846991a2628267.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论