角度路由似乎阻止滚动 [英] Angular routing appears to be preventing scrolling

问题描述

我已经设置了带有路由的角度应用程序，遇到的问题是各个组件似乎无法滚动.

I have set up an angular app with routing and the problem I've run into is that the individual components seem unable to scroll.

在我的index.html文件中，

In my index.html file, I have

<app-root><div class="loading"></div></app-root>

然后在我的app.component.html中，我有

Then in my app.component.html, I have

<router-outlet></router-outlet>

然后我有各种组件.我发现如果将给定代码替换为app.component.html或index.html中的长段落，则会获得滚动功能，但是如果将段落放置在任何子组件HTML文件中，则不会滚动.我对angular/frontend还是很陌生，因此即使为我指出外观方向也会很有帮助，因为在我弄清楚这一点之前，我的发展一直停滞不前.

Then I have my various components. I have found that I get scrolling functions if I replace the given code with a long paragraph in either app.component.html or index.html but I get no scrolling if I place the paragraph in any of the sub-component HTML files. I'm very new to angular/frontend so even pointing me the direction to look would be very helpful because my development is stagnated until I figure this out.

此外，如果还有其他我可以张贴的文件，对您有帮助，请询问.

Also if there are any other files that I could post that would be helpful to see please ask.

推荐答案

我遇到的问题是我需要在styles.css文件夹中添加

The problem I was having was that in my styles.css folder I needed to add

.form-container { 
  position: absolute;
}

在我的router.animations.ts文件中，我需要将固定"更改为绝对"

And in my router.animations.ts file I needed to change the 'fixed' to 'absolute'

export function moveIn() {
  return trigger('moveIn', [
    state('void', style({position: 'fixed', width: '100%'}) ),
    state('*', style({position: 'fixed', width: '100%'}) ),
    transition(':enter', [
      style({opacity:'0', transform: 'translateX(100px)'}),
      animate('.6s ease-in-out', style({opacity:'1', transform: 'translateX(0)'}))
    ]),
    transition(':leave', [
      style({opacity:'1', transform: 'translateX(0)'}),
      animate('.3s ease-in-out', style({opacity:'0', transform: 'translateX(-200px)'}))
    ])
  ]);
}

之后

export function moveIn() {
  return trigger('moveIn', [
    state('void', style({position: 'absolute', width: '100%'}) ),
    state('*', style({position: 'absolute', width: '100%'}) ),
    transition(':enter', [
      style({opacity:'0', transform: 'translateX(100px)'}),
      animate('.6s ease-in-out', style({opacity:'1', transform: 'translateX(0)'}))
    ]),
    transition(':leave', [
      style({opacity:'1', transform: 'translateX(0)'}),
      animate('.3s ease-in-out', style({opacity:'0', transform: 'translateX(-200px)'}))
    ])
  ]);
}

这篇关于角度路由似乎阻止滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！