reactjs 框架页面的结构

zbdgwd5y  于 2023-06-29  发布在  React
关注(0)|答案(1)|浏览(118)

我想知道在生产环境中,实现框架页面的最佳实践是什么。在我看来,有(至少?)渲染 backbone 视图的两种主要方式,一种是给每个div放一个 backbone 替代,分布性更强,另一种是放一个大的整体 backbone 体替代整个 backbone 组件,集中性更强。Angular中的一个简单示例可以是

<!--The distributed way-->
<parent>
  <h1 *ngIf="!loading">This is a header</h1>
  <h1 *ngIf="loading">SKELETON PLACEHOLDER</h1>
  <div *ngIf="!loading">This is content</div>
  <div *ngIf="loading">SKELETON PLACEHOLDER</div>
</parent>

vs

<!--The centralized way-->
<parent *ngIf="!loading">
  <h1 >This is a header</h1>
  <div *ngIf="!loading">This is content</div>
</parent>
<parent *ngIf="loading">
  <h1>SKELETON PLACEHOLDER</h1>
  <div>SKELETON PLACEHOLDER</div>
</parent>
00jrzges

00jrzges1#

您可以使用else显示备选模板
示例:

<div *ngIf="data; else placeholder" >content</div>
<ng-template #placeholder></placeholder>

更多关于这方面的信息,请参阅文档:https://angular.io/api/common/NgIf#showing-an-alternative-template-using-else

相关问题