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

问题描述

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

在我的 index.html 文件中，我有

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

然后我有我的各种组件.我发现如果我用 app.component.html 或 index.html 中的长段落替换给定的代码，我会获得滚动功能，但如果我将段落放置在任何子组件 HTML 文件中，我就不会滚动.我对 angular/前端非常陌生，所以即使为我指明方向也会非常有帮助，因为我的发展停滞不前，直到我弄清楚这一点.

另外，如果我可以发布任何其他有助于查看的文件，请询问.

解决方案

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

.form-container {位置:绝对；}

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

导出函数 moveIn() {返回触发器('moveIn'，[state('void', style({position: 'fixed', width: '100%'}) ),state('*', style({position: 'fixed', width: '100%'}) ),过渡(':输入'，[样式({不透明度:'0'，变换:'translateX(100px)'})，动画('.6s 缓出'，样式({不透明度:'1'，变换:'translateX(0)'}))]),过渡(':离开'，[样式({不透明度:'1'，变换:'translateX(0)'})，animate('.3s 缓出', style({opacity:'0', transform: 'translateX(-200px)'}))])]);}

之后

导出函数 moveIn() {返回触发器('moveIn'，[state('void', style({position: 'absolute', width: '100%'}) ),state('*', style({position: 'absolute', width: '100%'}) ),过渡(':输入'，[样式({不透明度:'0'，变换:'translateX(100px)'})，动画('.6s 缓出'，样式({不透明度:'1'，变换:'translateX(0)'}))]),过渡(':离开'，[样式({不透明度:'1'，变换:'translateX(0)'})，动画('.3s 缓出'，样式({不透明度:'0'，变换:'translateX(-200px)'}))])]);}

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.

In my index.html file, I have

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

Then in my app.component.html, I have

<router-outlet></router-outlet>

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.

解决方案

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

.form-container { 
  position: absolute;
}

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)'}))
    ])
  ]);
}

after

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屋！