Question

我有一个使用Material Design Lite的angular2组件，但是在组件的第一次加载时没有正确呈现复选框（可能还有其他元素），而如果我与复选框交互，则正确应用了mdl样式。在我的组件中我有

ngAfterViewInit() {
    componentHandler.upgradeDom();
}

但这并不能解决我的问题，所以我在服务返回一些数据后立即执行了setTimeout。这似乎有效，但建议这样做吗？

this.service.getDetails(this.id)
            .finally(() => {
                setTimeout(() => {
                    componentHandler.upgradeDom();
                }, 10);
            })
            .subscribe((details) => {
                this.details = details;
            });

Answer 1

如果您将组件设置添加到问题中也会有所帮助。看看angular.io文档的Component Styles部分。我想你只需要将选择器和样式添加到组件的注释中。来自文档：

@Component({
   selector: 'hero-app',
   template: `
       <h1>Tour of Heroes</h1>
       <hero-app-main [hero]=hero></hero-app-main>`,
   styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
    /* . . . */
}

Answer 2

在不知道代码的来龙去脉的情况下，纯粹从理论层面引入竞争条件，其中（无论是什么导致延迟）必须在10ms内完成。

你能否确认它会一直这样做？如果可以（100％确定），我说它没事。但是，根据经验，我会说要远离超时，而是尽可能使用事件。

请注意：我还没有使用Angular 2，但我知道在Angular 1中，摘要有时需要手动触发。这可能就是这里发生的事情。

在生产代码中使用setTimeout是否安全？

2 个答案: