Angular的*ngIf不在重新路由时起作用。
创始人
2024-10-24 01:00:41
0

这通常是由于组件的生命周期钩子中出现问题所引起的,解决方法是使用子组件和*ngIf在重新路由时重新加载父组件。以下是示例代码:

在父组件中:


  



在父组件中,我们将创建一个showChild布尔属性,在重新路由时它将连同子组件重新加载。父组件可以像这样处理路由:

import { Router } from '@angular/router';

// 在constructor中注入路由
constructor(private router: Router){}

// 模拟重新路由
reRoute() {
  this.router.navigate(['parent']);
  this.showChild = false;

  setTimeout(() => {
  this.showChild= true;
  });
}

在子组件中:


  
...

在这里,我们将dataLoaded布尔属性传递给子组件。在子组件的生命周期钩子中,我们将设置为false,并且在订阅数据时将它设置回true。这将确保只有在数据加载完成时才显示组件,而不会出现重新路由时组件未加载的情况。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from '../data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit, OnDestroy {
  dataLoaded = false;
  subscription: Subscription;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // 假设这是订阅我们的数据类型的observable
    this.subscription = this.dataService.getData().subscribe(data => {
      this.data

相关内容

热门资讯

wepoke是不是有辅助!we... wepoke是不是有辅助!wepoke有没有挂,(德州wepower)确实真的是有挂,科技教程(黑科...
德州之星ai软件!德州ai辅助... 德州之星ai软件!德州ai辅助有用吗,(德州ai)确实是有挂,大神讲解(黑科技技巧)1)德州ai辅助...
wepokeai代打!WePo... wepokeai代打!WePoKe有挂吗,(wepOke)确实是有挂,AI教程(黑科技透明);1、任...
wepoke辅助使用教程!we... wepoke辅助使用教程!wepower透视外挂,(WepokE)确实存在有挂,2025新版技巧(黑...
德州线上外挂!德州之星辅助器使... 德州线上外挂!德州之星辅助器使用教程,(德州)果然真的有挂,新版2025教程(黑科技透明挂);一、德...
wpk外挂第一视角!wpk数据... wpk外挂第一视角!wpk数据统计软件,(wPK)确实真的是有挂,科技教程(黑科技透视)1、wpk外...
wpk辅助神器!wpk有辅助挂... wpk辅助神器!wpk有辅助挂吗,(Wpk)总是有挂,技巧教程(黑科技总结)1、金币登录送、破产送、...
aapoker这个软件靠谱吗!... aapoker这个软件靠谱吗!AApoker透明挂,(德州aa扑克)确实是真的有挂,2025新版技巧...
wpk透视辅助挂!wpk辅助器... wpk透视辅助挂!wpk辅助器是真的假的,(WPK)本来真的有挂,透明教程(黑科技总结);1、很好的...
wpk辅助神器!线上wpk德州... wpk辅助神器!线上wpk德州ai打法,(wPK)本来真的有挂,科技教程(黑科技辅助器);进入游戏-...