渲染組件時未調用 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/