时间戳

首页 > 解决方案 > 组件间 JS/TS，在 Angular 项目中动态加载

javascript - 组件间 JS/TS，在 Angular 项目中动态加载

问题描述

你好当前的组件结构是

appComponent
--infoComponent
    ---beforeComponent
    ---afterComponent

现在前后组件都由导航栏和相应的 id 组成navbar_before，navbar_after

问题 1：我可以在 info 中使用 JS/TS 编写代码来加载之前/之后的组件，使用{{ }}基于一些 js/ts 条件吗？我不应该给

<app-before></app-before>
<app-after></app-after>

直接在 infoComponent 中。它应该作为变量给出

问题 2：如果问题 1 是，如何从 infoComponent 访问具有前/后组件 ID 的导航栏元素，例如var navbar = document.getElementById("navbar");

要点：我正在尝试使用不同菜单滚动的粘性导航栏希望有人可以提供一些关于如何解决此问题的资源

标签： javascriptangulartypescript

解决方案

您可以通过在父组件 html 中添加这两个组件来将前组件和后组件定义为父组件（“信息组件”）的子组件。

您必须在子组件中使用 *ngIf 来显示需要渲染的组件。您可以在父组件 ts 文件中声明一个 typescript 变量，然后使用 @Input() 在子组件中访问该变量值。

推荐阅读