Question

要创建我的初始屏幕，我需要调用一些服务以及我需要在UI中进行更改的响应基础。现在的挑战是，在我从UI获得响应之前，我不希望我的视图被渲染。

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

任何帮助都非常值得赞赏。

Answer 1

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

在视图呈现之前我不知道你为什么要这样做，但这是一个错误的问题。 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;
                ...
            }
    }
}

Answer 2

如果它仅涉及您的初始屏幕，您应该查看Thierry Templier answer关于类似问题：在呈现应用程序之前等待异步服务。

如果路由器加载了此页面，您可以使用Angular路由器resolve guard等待一些异步调用，然后再渲染路由所针对的组件。

在angualr2中控制UI渲染

2 个答案: