在 angular2 中显示和隐藏 div 时移至顶部答案

【问题标题】：Move to Top on showing and hiding divs in angular2在 angular2 中显示和隐藏 div 时移至顶部
【发布时间】：2017-06-15 13:46:17
【问题描述】：

我在一个固定长度的 div-Content div 中有 2 个 div。内容 div 里面有 2 个 div - div1 和 div2。与内容 div 相比，这两个 div 都非常大。用户可以滚动 Content div 中的内容。用户将读取 div1，然后单击 div1 中的按钮，之后我将取消隐藏 div2 并隐藏 div1。但每次显示 div2 底部，而不是顶部数据。如何确保隐藏 div1 并显示 div2 时，div2 top show 进入内容 div。

任何帮助将不胜感激。

HTML 代码-

<div class = "completeBody">
  <div class = "header">
  </div>
  <div class = "content">
    <div class = "content1" *ngIf="showContent1">
        <div>
            top
        </div>
        <div class="bottomPoint">
            bottom
            <button (click)="showContent2()">SHOW Content2</button>
        </div>
    </div>
    <div class = "content2" *ngIf="!showContent1">
        <div>
            top
        </div>
        <div class="bottomPoint">
            SEE NOW YOU ARE IN BOTTOM,I WANT THAT WHEN CONTENT2 SHOULD BECOME VISIBLE,ITS TOP SHOULD COME FIRST
        </div>
    </div>
  </div>
  <div class = "footer">
  </div>
</div>

CSS 代码-

   /* Styles go here */

.completeBody
{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}
.header
{
  height: 10%;
  width: 100%;
  background-color: red;
}
.content
{
  height: 80%;
  margin: 20px;
  background-color: #efefef;
  border: 2px solid black;
  overflow: auto;
}
.footer
{
  height: 10%;
  width: 100%;
  background-color: green;
}
.content1
{
  height:1000px;
  background-color: blue ;
}
.content2
{
  height:1000px;
  background-color: #909090 ;
}
.bottomPoint
{
    padding-top:950px;
}

打字稿代码-

import {Component} from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: 'app/apphtml.html',
    styleUrls: ['app/appcss.css'],
})
export class App {
  showContent1:boolean;

  constructor() {
    this.showContent1 = true;
  }
  showContent2()
  {
    this.showContent1 = false;
  }

}

这是 PLUNKER 的链接 - https://plnkr.co/edit/abjZKMt0CkvJaTgaBDRm?p=preview

【问题讨论】：

请显示一些代码。在这种情况下，最好使用 Plunker。
分享你尝试过的代码
请分享一些代码。并检查。对于显示和隐藏 div，您使用的是什么 hidden 或 *ngIf ？
添加了代码。
看来你只需要滚动回到 div 的顶部。在角度我可以给你一个解决方案，但不是打字稿。

标签： html css angular angular2-directives

【解决方案1】：

这样做的方法是将我们的滚动容器与 viewchild 绑定，然后获取该元素的本机属性并更新它。

对于任何参考，请参阅相同的 plunker 链接，它已更新。

【讨论】：