时间戳

首页 > 解决方案 > Angular 自定义库组件仅在 app.component 中呈现

angular - Angular 自定义库组件仅在 app.component 中呈现

问题描述

我正在尝试将我的自定义库从不同的项目导入到我的新应用程序中。到目前为止，我已经开发了该库，并正在使用npm link它在本地将其导入我的应用程序。我看到了这种奇怪的现象。我的 app.component 像许多应用程序一样设置，并且其中有一个路由器插座：

<router-outlet></router-outlet>

我创建了一个使用我的自定义库组件的本地组件（这是模板）：

<my-custom-lib-component></my-custom-lib-component>

以及指向该组件的路由定义，如下所示：

const routes = [{
  path: 'local-path',
  component: LocalComponent
}];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

当您导航到local-path自定义库组件时，不会在 dom 中呈现。的标签my-custom-lib-component在那里，但组件没有被构建。其他角度指令和组件工作。

但是，如果我将库组件移动到我的应用程序组件，它会呈现。我以前从未遇到过这样的事情。

为什么我的库组件会呈现在 app.component 而不是路由器出口创建的组件中？

标签： angular

解决方案

我找到了答案。由于某种原因，该组件未在 app.module 中声明，这很奇怪，因为 1）我使用 angular cli 创建它 2）我的应用程序中只有一个模块，3）它没有给我任何未声明的错误和 4) 组件已加载并部分工作

推荐阅读