我真的要吓坏了。我正在尝试渲染一个 .gjs 组件，但它没有显示出来。我尝试在模板标签 <h1>Hi</h1> 中渲染，但即使是这个也显示不出来。这是怎么回事？
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) =\u003e {
api.renderInOutlet("above-main-container", \u003ctemplate\u003e\u003ch1\u003eHi\u003c/h1\u003e\u003c/template\u003e);
});
我省略了组件导入，因为它无论是否包含它都不会渲染。
我真的不知道我哪里做错了。
我真是瞎了。文件在 api_initializers 里，而不是 api-initializers 
。
太棒了……现在我的组件没有渲染……
有什么想法吗？
我的 api-initializers 文件：
import { apiInitializer } from "discourse/lib/api";
import CategoryHeader from "../components/category-header";
export default apiInitializer((api) => {
api.renderInOutlet("above-category-heading", CategoryHeader);
});
我的组件（.gjs）文件：
import icon from "discourse/helpers/d-icon";
import Component from "@glimmer/component";
import { inject as service } from "@ember/service";
export default class CategoryHeader extends Component {
@service siteSettings;
get ifParentCategory() {
if (this.args.category.parentCategory) {
return true;
}
}
get catDesc() {
if (settings.show_category_description) {
return true;
}
}
get logoImg() {
if (settings.show_category_logo && this.args.category.uploaded_logo) {
return this.args.category.uploaded_logo.url;
} else if (settings.show_category_logo && settings.show_parent_category_logo && this.args.category.parentCategory && this.args.category.parentCategory.uploaded_logo) {
return this.args.category.parentCategory.uploaded_logo.url;
} else if (settings.show_site_logo && this.siteSettings.logo_small) {
return this.siteSettings.logo_small;
}
}
get ifParentProtected() {
if (this.args.category.parentCategory && this.args.category.parentCategory.read_restricted) {
return true;
}
}
get ifProtected() {
if (this.args.category.read_restricted) {
return true;
}
}
get lockIcon() {
return settings.category_lock_icon || 'lock';
}
get showHeader() {
console.log(this.args.category);
const isException = this.args.category && settings.hide_category_exceptions.split("|").includes(this.args.category.name);
const hideMobile = !settings.show_mobile && this.site.mobileView;
const subCat = !settings.show_subcategory_header && this.args.category.parentCategory;
const noDesc = !settings.hide_if_no_category_description && !this.args.category.description_text;
const path = window.location.pathname;
return (/^\\/c\\//.test(path)
&& !isException
&& !noDesc
&& !subCat
&& !hideMobile
);
}
get getHeaderStyle() {
let headerStyle = "";
if (settings.header_style == "box") {
headerStyle += "border-left: 6px solid #" + this.args.category.color + ";";
}
if (settings.header_style == "banner") {
headerStyle += "background-color: #" + this.args.category.color + "; color: #" + this.args.category.text_color + ";";
}
if (this.args.category.uploaded_background) {
if (settings.header_background_image != "outside"){
headerStyle += "background-image: url(" + this.args.category.uploaded_background.url + ");";
}
}
return headerStyle;
}
get aboutTopicUrl() {
if (settings.show_read_more_link && this.args.category.topic_url) {
return settings.read_more_link_text;
}
}
<template>
{{#if this.showHeader}}
<div class="category-title-header category-banner-{{this.args.category.slug}}" style="{{this.getHeaderStyle}}">
<div class="category-title-contents">
<div class="category-logo aspect-image">
<img src="{{this.logoImg}}">
</div>
<div class="category-title-name">
{{#if this.ifParentProtected}}
{{icon this.lockIcon}}
{{/if}}
{{#if this.ifParentCategory}}
<a class="parent-box-link" href="{{this.args.category.parentCategory.url}}">
<h1>{{this.args.category.parentCategory.name}}: </h1>
</a>
{{/if}}
{{#if this.ifProtected}}
{{icon this.lockIcon}}
{{/if}}
<h1>{{this.args.category.name}}</h1>
</div>
<div class="category-title-description">
{{#if this.catDesc}}
<div class="cooked">
{{this.args.category.description}}
</div>
{{/if}}
</div>
</div>
<div class="category-about-url">
<a href="{{this.args.category.topic_url}}">{{this.aboutTopicUrl}}</a>
</div>
</div>
{{/if}}
</template>
}
一切看起来技术上都正确，为什么它不渲染呢 
…?
这可能看起来很熟悉……是的，我正在尝试将小部件切换为 Glimmer 组件。
你怎么能得出它看起来是正确的，你是否遵循了基本步骤？
我不确定您修复后的当前代码是什么，但看到您收到的警告，.category-title-header div 至少应该在 DOM 中渲染。
我建议在浏览器中检查页面。另外，尝试插入一些 console.log 来查看应用程序在代码的哪个位置执行。或者，有适用于 Chrome 和 Firefox 的 Ember Inspector 浏览器扩展，可以帮助您读取组件树。
如果可以的话，获得此反馈的最简单方法是共享您的存储库。您上面共享的文件不是独立的，还需要一个设置文件。
是的，抱歉之前没有包含。应该是：
https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new
（fix-compatibility-issues-new-new 分支。）
谢谢，我会仔细研究一下。
@Alteras 它实际上就在那里，但不知何故没有显示。添加 display: block !important 使它出现了，但样式现在大不相同了 
编辑：已修复 CSS，标题现在已显示。非常感谢 @merefield @Alteras @manuel！
我也刚遇到那个错误，当没有类别描述时。谢谢你的建议！
