使用*ngIf时如何防止闪烁？

Question

在我的app.component.html 中：

<html>
    <head></head>
    <body>
        <header *ngIf="loggedIn && showHeader"></header>
        <router-outlet></router-outlet>
    </body>
</html>

在我的app.component.ts 中：

export class AppComponent {

    constructor(private HeaderService: HeaderService, private AuthService: AuthService) { }

    get loggedIn(): boolean { return this.AuthService.getUserState(); }    
    get showHeader(): boolean { return this.HeaderService.getToggleState(); }
}

在我的header.service.ts 中：

我们创建此服务是因为登录后还有其他特定组件需要隐藏标题。

@Injectable({
    providedIn: 'root'
})

export class HeaderService {

    showHeader = true;

    constructor() { }

    setToggleState(state: boolean) {
       this.showHeader = state;
    }

    getToggleState() { return this.showHeader; }
}

现在，在我的login.component ，标题应该是不可见的。

现在发生的事情是，有短暂的闪烁（似乎在您登录然后注销并返回登录页面时发生），其中标题在隐藏之前可见（是的，还会抛出ExpressionChangedAfterItHasBeenCheckedError ）。

实现这一目标的最佳方法是什么？ 我应该默认将showHeader设置为false吗？

登录.component.ts

export class LoginComponent implements OnInit {

  ngOnInit() {
       // To hide the header
       this.HeaderService.setToggleState(false);
  }
}

Answer 1

当您使用*ngIf ，该元素不在 DOM 中（如果条件为false ）并将在运行时放入 DOM 中。

相反，您可以使用[hidden]="<your condition>" ，因为即使条件为false ，您的元素也会出现在 DOM 中。 如果您的条件更改为true ，则元素的opacity将从0更改为1 ，从而使元素可见。

现在，为了获得更平滑的过渡，您可以像这样在 DOM 元素上放置一些 CSS：

.your-element {
    transition: visibility 0.5s;
}

通过这种方式，您可以获得类似悬停的效果。

此外，对于您的第二个问题（在数据存在之前标题短暂闪烁）：这可以解释，因为您使用true初始化showHeader 。 所以一开始就出现了，然后在服务初始化的时候突然消失了。 因此，在这种情况下，只需在初始化时将其设置为false 。

希望有帮助:)

Answer 2

你可以简单地添加

ngOnDestroy(){
    this.service.setToggleState(true);
  }

在登录组件中。 您可以在服务中将默认值设置为 true。 然后当您不需要显示组件的标题时，然后将ngoninit设置为false并将ngondestroy设置为true以避免闪烁。

例如，请参见此处https://stackblitz.com/edit/angular-krit8a

使用*ngIf时如何防止闪烁？

问题描述

2 个解决方案

解决方案1
3 已采纳 2020-01-21 15:27:36

解决方案2
0 2020-01-21 15:47:34

使用*ngIf时如何防止闪烁？

问题描述

2 个解决方案

解决方案1 3 已采纳 2020-01-21 15:27:36

解决方案2 0 2020-01-21 15:47:34

解决方案1
3 已采纳 2020-01-21 15:27:36

解决方案2
0 2020-01-21 15:47:34