当组件被渲染时,Init()方法没有被调用?

huwehgph  于 2022-10-20  发布在  其他
关注(0)|答案(1)|浏览(185)

我试图从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()调用也不会发生,因此我的组件出现故障
你知道我可能缺少什么吗?

368yc8dk

368yc8dk1#

微光组件没有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/@闪光%2Fcomponent#构造函数

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

相关问题