如何将模板从模板组件中分离出来(惰性加载模板) [英] How to separate template out of stencil components (lazy load template)

问题描述

这个问题很有趣，所以请读到最后。我想要实现的是将模板分离到另一个js文件中，并在需要时延迟加载它。当在Reaction生态系统中做同样的事情时，它可以工作，但是模具不能！分诊回购https://github.com/pranav-js/triage-repo

我将我的TSX模板放在另一个.js文件中，说明

模板-Three.js具有简单的onclick，它只发出警报

import { h } from '@stencil/core';
export const template_three = () => {
  return <button onClick={() => alert()}>Template three here</button>;
};

当我尝试通过导入Component-Two.tsx来调用此方法时，如下所示

import { Component, Fragment, h, Host, State } from '@stencil/core';

@Component({
  tag: 'component-two',
  styleUrl: 'component-two.css',
  shadow: true,
})
export class ComponentTwo {
  @State() showComponentOne: any;
  method: any;
  template: string = '';

  constructor() {}

  componentWillRender() {
    this.fetchComp(2);
  }

// lazy load template when needed based on type passed

  fetchComp(type) {
    let this_ = this;
    switch (type) {
      case 0:
        import('./template').then(module => {
          this.showComponentOne = module.template_one;
        });
        break;
      case 1:
        import('./template-two').then(module => {
          this.showComponentOne = module.template_two;
        });
        break;
      case 2:
          import('./template-three').then(module => {
            this.showComponentOne = module.template_three;
          );
        break;
      default:
        break;
    }
  }

  clicked() {
    alert();
  }

  methodHere() {}

// check if template received then simply call that method with this attached

  render() {
    let this_ = this;
    return this.showComponentOne ? this.showComponentOne.apply(this) : <div></div>;
  }
}

视图呈现，但事件侦听器没有工作：/，甚至不是简单的警报：(。当我检查时，我没有看到按钮上有任何事件。 但是，如果我将同一函数保留在Component类中，则它可以工作：(！

在组件内部和外部定义模板时，检查两个不同的对象。

您能告诉我我做错了什么吗？

我不能只将模板保存在组件中，因为我有许多用于相同逻辑的UI。 到目前为止，我还没有在网上找到任何方法这个答案也没有帮助 Passing custom template to stencil component

推荐答案

我认为问题是模板的树可抖动API和其动态导入的生成时分析问题的组合。

模板会尝试发布尽可能少的模板和代码，因此它将分析您的项目以找出您实际使用的功能，并且只将这些功能包括在最终捆绑包中。如果您检查第2行上的./build/index-{hash}.js(在dev www内部版本中)，您将发现它检测到哪些功能的列表。

我创建了自己的快速复制，并在使用动态导入和静电导入时对此文件进行了比较。以下是不同之处：

动态导入

{ vdomAttribute: false, vdomListener: false }

静电导入

{ vdomAttribute: true, vdomListener: true }

因此，Stencel似乎没有意识到您仅在动态导入的模板中使用的特性，因此没有将其包含在构建中。但是，如果您在任何组件(或静态导入到组件中的文件)中使用相同的功能，则模具应该包括它。

因此，一个简单的解决办法是将任何侦听器附加到项目的任何组件中的任何元素。而且您必须对当前仅在动态加载的模板中使用的每个模板功能执行此操作。

另一个选项是创建静态包含所有动态模板的模板组件。AFAIK这将检测所有使用的功能，并为项目启用它们，即使不必在任何地方使用此新组件。

示例：

import { Component, Host, h } from '@stencil/core';
import { Template1 } from "../../templates/template1";
import { Template2 } from "../../templates/template2";
import { Template3 } from "../../templates/template3";

@Component({
  tag: 'template-imports',
})
export class TemplateImports {
  render() {
    return (
      <Host>
        <Template1></Template1>
        <Template2></Template2>
        <Template3></Template3>
      </Host>
    );
  }
}

这篇关于如何将模板从模板组件中分离出来(惰性加载模板)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！