Angular 如何在不使用解析器的情况下在呈现页面之前加载数据？

我的问题是在呈现页面之前没有定义对象。 我想先加载数据，然后在不使用解析器或ngIf的情况下呈现页面。 我可以使用生命周期挂钩来完成这项工作吗

我当前的设置：

app.component.ts

  onNavigateToDetailView(url: string, title: string){
     this.service.getResourceUrl(url).subscribe( 
       (data) => {
         this.service.detailedObj = data;
         console.log(data);
       } 
     );
     this.router.navigate(['detailedview/' + title]);
  }

现在，在我的

视图.component.ts中，我想将服务中的对象分配给一个变量：

ngOnInit(){
  this.obj = this.service.obj;
}

在我的
view.component.html
中，我有：

{{obj.text}}

它现在可以工作了，因为正如我所说的，在渲染时对象是未定义的。如果我在我的服务中像那样使用对象

{{this.service.obj.text} 

它可以工作，但我不想使用它

那么，我是否可以等待数据被定义，然后在不使用解析器或*ngIf的情况下呈现页面？用另一个LyfeCycle钩子而不是ngOnInit有可能吗

闪电战：

正如您在导航到hello.component后看到的，空对象是控制台的输出。但当您在hello.component中单击show时。对象已正确初始化…
您可以使用异步管道：

在ts文件中：

data$: Observable<any>;

ngOnInit() {
  this.data$ = this.service.getResourceUrl(url);
}

您可以使用异步管道：

在ts文件中：

data$: Observable<any>;

ngOnInit() {
  this.data$ = this.service.getResourceUrl(url);
}

在检查了你们的闪电战和问题后，我明白了，你们需要一个守卫在路上

我首先修改了您的getInfo服务，以返回一个承诺

  getInfo(titel: string, type: string) {
    return this.http.get(...).toPromise()
      .then( data => {this.obj = data; return data; });
  }

我已经创建了一个警卫服务并实现了
CanActivate

@Injectable({
  providedIn: "root"
})
export class AppGuardService implements CanActivate {
  constructor(private router: Router, private srv: MyserviceService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.srv.getInfo("The Beatles", "artist")
      .then(() => return true; })
      .catch(error => {
        console.error(error);
        return false;
      });
  }
}

你可以在

更新：

但是，如果用例只需要一个导航，您可以修改
导航
功能，该功能现在可以从服务中获取数据作为承诺，并且可以跳过app guard服务并激活

  navigate(){
    this.srv.getInfo("The Beatles", "artist").then(
      () => this.router.navigate(["/hello"])
    )
  }

快乐编码
 在检查了你们的闪电战和问题后，我明白了，你们需要一名警卫在路上

我首先修改了您的getInfo服务，以返回一个承诺

  getInfo(titel: string, type: string) {
    return this.http.get(...).toPromise()
      .then( data => {this.obj = data; return data; });
  }

我已经创建了一个警卫服务并实现了
CanActivate

@Injectable({
  providedIn: "root"
})
export class AppGuardService implements CanActivate {
  constructor(private router: Router, private srv: MyserviceService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.srv.getInfo("The Beatles", "artist")
      .then(() => return true; })
      .catch(error => {
        console.error(error);
        return false;
      });
  }
}

你可以在

更新：

但是，如果用例只需要一个导航，您可以修改
导航
功能，该功能现在可以从服务中获取数据作为承诺，并且可以跳过app guard服务并激活

  navigate(){
    this.srv.getInfo("The Beatles", "artist").then(
      () => this.router.navigate(["/hello"])
    )
  }

快乐编码
 您必须将数据加载到view.component.ts中的ngOnInit中，如果您想在两个不同的组件之间绑定数据，则必须使用subjectcomponents@AhmedE.Eldeeb嘿，谢谢你的回答！我现在知道它为什么不起作用了。不知何故，在离开当前页面后，我的服务中的对象变为空。我不知道为什么。我认为服务中的变量是持久的。你能解释一下这个用例吗？我不能理解这件事。生命周期钩子将为组件阶段而不是服务异步操作阶段提供钩子。是的，服务中的变量是持久的如果可能的话，在stackblitz上添加一个最小的可重复性来查看当你不能为api调用使用生命周期钩子时，你可以使用安全导航操作符{{this.service？.obj？.text}}你必须在你的view.component.ts中的Ngonint中加载数据，或者，如果要在两个不同的数据库之间绑定数据，则需要主题components@AhmedE.Eldeeb嘿，谢谢你的回答！我现在知道它为什么不起作用了。不知何故，在离开当前页面后，我的服务中的对象变为空。我不知道为什么。我认为服务中的变量是持久的。你能解释一下这个用例吗？我不能理解这件事。生命周期钩子将为组件阶段而不是服务异步操作阶段提供钩子。是的，服务中的变量是持久的如果可能的话，在stackblitz上添加一个最小的可重复性来查看当你不能为api调用使用生命周期钩子时，你可以使用安全导航操作符{{this.service？.obj？.text}