渲染组件时未调用 Init() 方法？

Question

我正在尝试从 ember 经典语法迁移到更现代的语法，但很难理解为什么我的 init() 方法调用没有被调用？

模板：

<HomeCard>
  {{#if this.loadThemeEditorDeepLink.lastSuccessful}}
    <PolarisBanner
      @status="critical"
      @action={{hash
        text="Turn on"
        onAction=(route-action "openUrl" this.themeEditorAppEmbedUrl)
      }}
      @secondaryAction={{hash
        text="Watch quick tutorial"
        onAction=(fn (mut this.showModal) true)
      }}
    />
  {{/if}}
</HomeCard>

{{#if this.showModal}}
  <PolarisModal
    @onClose={{fn (mut this.showModal) false}}
  />
{{/if}}

计数器.js组件文件：

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { dropTask } from 'ember-concurrency-decorators';
import { tracked } from '@glimmer/tracking';
export default class CheckComponent extends Component {
  @service ajax;

  @tracked themeEditorAppEmbedUrl = '';
  showModal = false;

  @dropTask
  loadThemeEditorDeepLink = function* loadThemeEditorDeepLink() {
    let url = yield this.fetchThemeSettingsAppEmbedDeepLink();
    this.themeEditorAppEmbedUrl = url;
  };

  async fetchThemeSettingsAppEmbedDeepLink() {
    try {
      let result = await this.ajax.request(
        `apiUrl`
      );
      return result.theme_editor_deep_link_url;
    } catch (err) {
      this.errorHandler.handle(err);
    }
  }

  init() {
    console.log('testing');
    super.init(...arguments);
    this.loadThemeEditorDeepLink.perform();
  }
}

即使我的组件渲染得很好，init() 调用也不会发生，因此我的组件出现故障

知道我可能遗漏了什么吗？

Answer 1

glimmer 组件没有 init 方法。它们大多是“基本的类”，因此您需要改用构造函数。

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { dropTask } from 'ember-concurrency-decorators';
import { tracked } from '@glimmer/tracking';

export default class CheckComponent extends Component {
  @service ajax;

  @tracked themeEditorAppEmbedUrl = '';
  showModal = false;

  constructor(owner, args) {
    super(owner, args);
    
    this.loadThemeEditorDeepLink.perform();
  }

  // ...
}

了解更多信息：

https://api.emberjs.com/ember/release/modules/@glimmer%2Fcomponent#constructor

这也可能有帮助：https://ember-learn.github.io/ember-octane-vs-classic-cheat-sheet/

渲染组件时未调用 Init() 方法？

Init() method not being called when Component gets rendered?

javascript

ember.js