Question

我有一个小组件，应该在超时1500毫秒后出现：

export class SmallComponent implements OnInit {
    public showComponent: boolean;
    private timeout: NodeJS.Timer;

    ngOnInit(): void {
        this.showComponent = false;

        this.timeout = setTimeout(() => {
            this.showComponent = true;
            clearTimeout(this.timeout);
        }, 1500);
    }
}

HTML相关：

<div *ngIf="showComponent">
    <div class="small-component-container" [@fadeInOut]>
        <!-- stuff here -->
    </div>
</div>

这里发生的是组件HTML在加载应用程序的最开始时出现。然后立即隐藏，并在1500ms再次出现之后。这只会在您第一次打开浏览器并转到该站点时发生。这是为什么？我以前从没见过。我一直在使用父组件中的AfterViewInit挂钩进行解决方法，但我不知道它的真正原因。

更新

删除除SmallComponent之外的所有组件后，我可以看到问题出现在应用程序第一次加载时以及我查看SSR应用程序时的问题。如果我运行它＆＃34; ng serve＆＃34;问题没有出现。

另一个更新

如果我在该组件上使用isPlatformBrowser并在ngIf上使用它来呈现/不呈现HTML，则此方法有效。那时似乎正在发生的是SSR启动但忽略了组件中的所有标志 - 这持续了大约半秒 - 然后实际站点呈现并且所有逻辑都运行。就像我说的，如果我将其排除在服务器上，那么它就会开始工作。顺便说一下，没有理解这种反对票。对我而言，这似乎是围绕SSR的一个非常有趣的问题/问题，在Angular应用程序上实现它时，它对于你的备忘单非常有用。

Answer 1

我不知道为什么setTimeout（）在这里失败了，但我还有另一个解决方案：

import { timer } from 'rxjs/observable/timer';

export class SmallComponent implements OnInit {
    public showComponent: boolean = false;

    ngOnInit(): void {
      const delay = timer(1500);

      const subscribe = delay.subscribe(val => { 
         this.showComponent = true;
      });
    }
}

使用Observable作为计时器。这应该可以正常工作。

即使ngIf为假，Angular 5组件也会显示/隐藏

1 个答案: