정말 당황하고 있습니다. .gjs 컴포넌트를 렌더링하려고 하는데, 화면에 표시가 되지 않습니다. 템플릿 태그(<h1>Hi</h1>)를 사용하여 렌더링을 시도해 보았지만, 그것도 표시되지 않습니다. 대체 무슨 일이 일어나고 있는 건가요?
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.renderInOutlet("above-main-container", <template><h1>Hi</h1></template>);
});
컴포넌트 임포트를 생략했는데, 임포트를 포함하든 아니든 렌더링이 되지 않기 때문입니다.
솔직히 제가 어디서 잘못하고 있는지 모르겠습니다.
정말 눈이 어둡네요. 파일은 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 컴포넌트로 전환하려고 시도하고 있습니다.
정상이 보인다고 판단한 근거가 무엇인가요? 기본적인 단계들을 따랐나요?
@manuel 그래서 모든 것을 수정했습니다 (Prettier의 모호한 오류 몇 가지는 제외:
어떤 아이디어가 있을까요?
수정 후 현재 코드가 어떻게 되어 있는지 정확히 알 수는 없지만, 보고 계신 경고 메시지를 보면 .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 정말 감사합니다!
지금은 잘 동작하는 것 같습니다 
콘솔에 여전히 몇 가지 undefined 오류가 발생합니다. 중첩된 구조를 조회할 때는 선택 체이닝을 위해 ?. 연산자를 사용해야 합니다. 예를 들어:
this.args.category.description?.replace
카테고리 설명이 없을 때 그 오류를 방금 확인했습니다. 제안해 주셔서 감사합니다!