时间戳

首页 > 解决方案 > 为什么用 asyn ngOnInit() 写的代码只有在刷新组件后才生效，而不是在登录后才生效？

javascript - 为什么用 asyn ngOnInit() 写的代码只有在刷新组件后才生效，而不是在登录后才生效？

问题描述

Angular 新手，做多种事情。今天，我被分配了一项任务来读取返回单个值（即活动属性）的 webApi。阅读后，注入元素的添加类，classList即' '。bodyactiveClass

WebApi 从 the 返回 a promise，myservices.service.ts我从 the 的async ngOnInit方法app.component.ts和awaiting结果调用它。之后，我将添加activeClass到classList.body

现在，问题是当我登录系统时，“ activeClass”没有被添加到正文中，但是当我刷新时它就会生效。

为什么？这真让我抓狂。在办公室呆了大约 14 个小时，也无法从那里发布问题，因为那里不允许发布。

代码大致是这样的。

在app.component.ts

async ngOnInit () {
  const activeClass= await this.service.getData();
  document.body.classList.add(activeClass.Name.toLowerCase());
}

现在，当我登录时，它不会被添加到正文中，但是当我刷新它开始工作时，即body在activeClass其中。

标签： javascriptangulartypescriptdomtypescript2.0

解决方案

ngOnInit() 正在调用文档 API，由于视图未初始化，该 API 可能会返回 null。解决方案是包含ngAfterViewInit()来解决您当前面临的问题。

export class someClass implements OnInit, AfterViewInit  {
  async ngAfterViewInit() {
    const activeClass= await this.service.getData();
    document.getElementsByTagName('body')[0].classList.add(activeClass.Name.toLowerCase());
  }
}

这也可以通过另一种方法来完成。

import { Renderer2 } from ‘@angular/core’;

constructor(private renderer: Renderer2) { }

async ngAfterViewInit() {
    const activeClass= await this.service.getData();
    this.renderer.removeClass(document.body, activeClass.Name.toLowerCase());
}

推荐阅读