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

Question

我的问题是在呈现页面之前未定义我的 object。 我想先加载我的数据，然后在不使用解析器或 ngIf 的情况下呈现页面。 我可以使用 LifeCycle Hooks 来完成这项工作吗？

我目前的设置：

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]);
  }

现在在我的view.component.ts中，我想将我的服务中的 object 分配给一个变量：

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

在我view.component.html我有：

{{obj.text}}

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

{{this.service.obj.text} 

它有效，但我不想使用它。

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

Stackblitz： https://stackblitz.com/edit/angular-21zvgm

正如您在导航到 hello.component 并清空 object 后看到的那样，是控制台的 output。 但是当您单击 hello.component 中的显示时。 object 已正确初始化...

Answer 1

您可以使用异步 pipe：

在您的 ts 文件中：

data$: Observable<any>;

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

在 html 中：

{{(data$ | async)?.text}}

Answer 2

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

我首先修改了您的 getInfo 服务以返回Promise

  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;
      });
  }
}

修改路由以实现canActivate ：

{ path: "hello", component: HelloComponent, canActivate:[AppGuardService] }

你可以在https://stackblitz.com/edit/angular-nazeby 看到整个 stackblitz

更新：

但是，如果用例只需要一个导航，您可以修改navigate function，它现在作为 Promise 从服务获取数据，并且可以跳过 app-guard 服务和 CanActivate

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

快乐编码！