Question

我的这个组件有一个＆＃34;页面＆＃34;基本上是一个名为＆＃39;＃results-page＆＃39;的div，仅在有结果显示时显示。

描述其工作原理的最简单方法就是向您展示代码：

查找-page.component.ts：

    IF @Country IS NOT NULL AND @Country !='' 
    BEGIN

       CREATE @SecondTempAdmRoute TABLE
       (
            Country nvarchar(250),
            API1 nvarchar(250),
            API2 nvarchar(250),
            API3 nvarchar(250),
            AdmRoute nvarchar(250)
       )

       INSERT INTO @SecondTempAdmRoute
       SELECT * FROM #TempAdmRoute

       DELETE FROM #TempAdmRoute

       INSERT INTO #TempAdmRoute
       SELECT Country,API1,API2,API3,AdmRoute 
       FROM @SecondTempAdmRoute
       WHERE Country =@Country

       IF @API1 IS NOT NULL AND @API1!='' 
       BEGIN
          INSERT INTO #TempAdmRoute
           SELECT Country,API1,API2,API3,AdmRoute 
           FROM @SecondTempAdmRoute
          WHERE API1=@API1
       END
    END

查找-page.component.html：

import { Component } from '@angular/core';
import { NavbarComponent } from '../shared/navbar.component';
import { FindFormComponent } from '../find-page/find-form.component';

@Component({
   selector: 'find-page',
   templateUrl: 'app/find-page/find-page.component.html',
   styleUrls: ['app/find-page/find-page.component.css' ],
   directives: [ FindFormComponent ]
})
export class FindPageComponent {
   showResults = false;

     onResultsRecieved(recieved: boolean) {
        if ( recieved ) {
           this.showResults = true;
           ScrollToAnchor.goToTargetBottom("#results-page");
        }else {
           this.showResults = false;
        }
  }
}

当结果进入时，

<div id="find-page"> <find-form (onResultsRecieved)="onResultsRecieved($event)"></find-form> </div> <div *ngIf="showResults" id="results-page"> </div>由事件发射器触发。然后我们将oResultsRecieved()属性设置为true，这会导致＆＃39;＃results-page＆＃39;显示，一旦显示，我想滚动到该div的底部。我处理showResults就好了。但是，scrollToAnchor.goToTargetBottom()过早触发（在显示＆＃39;＃results-page＆＃39;之前），因此它不会滚动到＆＃39;＃results-page＆＃39;的底部。

如何在{＆＃39;＃results-page＆＃39;之后“scrollToAnchor.goToTargetBottom()执行scrollToAnchor.goToTargetBottom()显示？

Answer 1

This answer解释了发生了什么。没有我所知道的清洁解决方案。我已经制作了这个适用于我的场景的hacky解决方案，我在div中没有任何东西，我希望它隐藏起来：

删除* ngIf并始终显示组件。

<div id="results-page"> </div>

在要隐藏的组件内，添加样式绑定，使其不占用屏幕空间：

<div id="results" class="text-uppercase" [style.padding]="padding" [style.height]="height">

component.ts：

export class ResultsComponent implements AfterViewInit {
  results: Result[];
  noResults: boolean;
  padding = "0px";
  height = "0px";

然后，一旦你想取消隐藏它，请根据需要设置高度和填充：

this.padding = "10px 0px 50px 0px";
this.height = "inherit";

显示div后执行方法

1 个答案: