ember.js Ember 3.16辛烷-组件未显示在应用程序.hbs中

jrcvhitl  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(148)

我用ember generate为我正在关注的youtube视频创建了一个标题组件。我有几个问题-
1.当我运行ember generate component header时,终端响应在app〉components中创建header.hbs文件,但随后跳过app/components中的header.js。我在该目录中手动创建了一个header.js文件,如果我在js文件中执行alert(),它就可以工作。
1.我在我的头文件.hbs中有以下代码。

<h1>Hello There!</h1>

{{yield}}

在我的应用程序.hbs文件中:

<Header/>

{{outlet}}

有什么想法和建议?2事先感谢您的帮助!

xqkwcwgp

xqkwcwgp1#

让我试着解释一下。基本上有4种成分在ember。

没有.js文件

当你调用一个组件时,ember会首先查找组件类。当它 * 没有 * 找到这样的类时,它的行为取决于可选的特性template-only-glimmer-components。这在新的octane应用程序中默认启用。
如果它 * 是 * 启用ember将查找基于一些标准规则的组件模板,并使用它,但将有 * 没有 * 支持类。这是相当不错的。这也基本上是什么,你在一个辛烷值应用程序时,你做ember g component my-component
template-only-glimmer-components被禁用时,一个 implicit 经典组件类将被自动创建并与正确的模板一起使用。您不希望出现这种行为。如果您仍然有这种行为,您可以通过1)为每个组件创建一个.js文件,然后2)启用template-only-glimmer-components来迁移它。

使用.js文件

当找到一个js文件时,ember将得到该模块的default导出,然后查找正确的组件管理器,这实际上取决于该导出:setComponentManager。这通常是在@ember/component@glimmer/component的基类中完成的。但是,您 * 也可以 * 编写自己的自定义组件管理器。
基本上,ember也会基于该组件查找模板。this RFC中提出了一个用于此目的的公共API,但是目前一个私有的API被用于所谓的 template co-location,在这里你把你的.hbs文件放在你的.js文件旁边,它们具有相同的名称,只是扩展名不同。这是默认的八分位。这里有一个成员内部构建-ember-cli中的步骤基本上是将您的模板添加到.js文件中并使用该API。您也可以在浏览器调试器中看到结果。因此,如果没有默认导出,则ember无法找到您的模板。

相关问题