renderInOutlet 사용 중 문제 발생

개발
1

아마도 제가 아주 멍청한 실수를 하고 있는 것 같은데, 그걸 알아볼 수가 없습니다. 여기에 질문을 올리면 제가 그걸 알아보고, 다른 사람들이 제 멍청함을 알기 전에 이 글을 삭제할 수 있기를 바랍니다.

"HELLO WORLD"가 홈 페이지에 표시되어야 합니다. 콘솔에서는 "THIS IS THE HOMEPAGE"가 출력되는 것을 볼 수 있습니다. 코드가 실행되고 있다는 것은 압니다. 하지만 화면에는 나타나지 않습니다.

그런데 다른 아이디어가 없어서 "Extra item"을 추가해 보았는데, 이것도 렌더링되지 않습니다.

파일 이름을 .gjs로 변경하기 전에 오류가 발생했었기 때문에, 파일이 인식되고 무언가가 일어나고 있다는 추가 증거가 됩니다.

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.8.0", (api) => {
  // see if we're on the home page
  api.onPageChange(() => {
    const router = api.container.lookup("service:router");
    const url = router?.currentURL;
    const isHomePage = url === "/";
    api.renderInOutlet("top-notices", <template>Extra item</template>);
    if (isHomePage) {
      console.log("THIS IS THE HOMEPAGE");
      api.renderInOutlet("after-header", <template>HELLO WORLD</template>);
    }
  });
});
2

아직 렌더링되지 않아 연결할 아웃렛이 없는 것일 수 있나요?

onPageChange는 라우트 변경 시 발화됩니다 …

3

제가 말한 바로 그 멍청한 상황이네요!!

이게 홈 페이지에서만 일어나게 하고 싶은데.

그렇긴 한데! onPageChange에서 그 렌더링 관련 것 중 하나를 빼내면 렌더링이 됩니다.

그럼 URL이 /일 때만 이걸 어떻게 실행할 수 있을까요?

정식 컴포넌트를 만들고 shouldRender() 호출을 추가하면 될까요?

4

라우터 서비스(컴포넌트 내부에)를 추가하고 getter를 설정해야 합니다.

5

정말 고마워요! 그 단어들의 의미를 대부분 알고 있어요!

6

이게 도움이 되길 바라요! 모든 게 정상적으로 실행되면 알려주세요!

7

오, 신난다! 내가 서비스가 뭔지 진짜로 알고 있었어! 게터가 뭔지도 진짜로 알았다고! 이제 내 텍스트가 다른 페이지가 아니라 홈 페이지에 렌더링되고 있어 (그리고 아마 나머지 모든 페이지에도!).