Question

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

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

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

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

<router-outlet></router-outlet>

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

此外，如果我可以发布任何其他文件，请查看请参阅。

Answer 1

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

.form-container { 
  position: absolute;
}

在我的router.animations.ts文件中，我需要更改＆＃39; fixed＆＃39;绝对＆＃39;

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

角度路由似乎阻止了滚动

1 个答案: