在angualr2中控制UI渲染

要创建我的初始屏幕，我需要对服务进行一些调用，并且需要在UI中进行更改。现在的挑战是我不希望我的视图在得到UI的响应之前呈现。在angualr2中控制UI渲染

有没有什么办法可以防止UI渲染，并获得服务响应后，我可以要求UI设置我的值后得到渲染？

任何帮助是非常可观的。

来源

2016-09-30 Ravinder Kumar

正如您在lifecycle documentation中看到的那样，在渲染之前无法放置钩子，因为如果您在ngOnChanges中执行该操作，它将在每次更改时调用。

我不知道为什么你要它在视图呈现之前，但这是一个错误的问题。 Angular2的存在是为了能够随时管理你的视图，所以即使它被渲染，使用的工具如*ngIf，*ngSwitchCase，你可以随时编辑你的视图。

您应该将方法中的逻辑绑定到ngOnInit方法中，并使其更改组件中的变量，以便您的视图一有数据就立即更新。

否则，如果你真的想要的视图，只有当服务的承诺完成被渲染，你可以用你的组件模板在*ngIf：

<div *ngIf="init"> 
... 
... 
... 
</div>

，然后一旦承诺完成后，就可以设置init为true：

export class ExampleComponent implements OnInit{ 

    init:boolean=false; 

    constructor(private service:FooService){} 

    ngOnInit():void{ 
     service.bar(...).then(() => 
      { 
       ... 
       this.init = true; 
       ... 
      } 
    } 
}

来源

2016-09-30 07:30:31 Supamiu

我很感谢你的努力。我根据服务的响应呈现菜单项。当最初在服务响应之前查看负载时，用户无法看到正确的视图。是的，一旦回应将会发生，并且* ngIf将执行其任务。当菜单项在运行时改变时，它会显得很奇怪。所以我希望在UI渲染之前有一切可用。但是，您的解决方案将帮助我。让我知道你是否有任何连击想法，否则我会接受这个答案。 –

正如我所说，angular2的目的是使视图动态，所以最好的解决方案是编辑你的设计的方式，它可以不那么奇怪，而等待服务响应。 – Supamiu

如果只涉及您的INTIAL屏幕，你应该看看亨利TEMPLIER answer一个类似的问题：渲染应用程序之前等待异步服务。

如果此页面由路由器加载，则可以使用Angular路由器resolve guard在呈现路由所针对的组件之前等待某个异步调用。

来源

2016-09-30 10:19:23

在angualr2中控制UI渲染

回答

相关问题