Angular路由和从库中导入组件

huangapple go评论59阅读模式
英文:

Angular routing and importing components from a library

问题

我已经设置了一个简单的骨架,代表我的应用程序在这里:https://stackblitz.com/edit/angular-e68rbx

应用模块加载并传递给一个框架模块,该框架模块承载了我的应用程序的主要页面。

为了演示问题,我在frameworktest-page组件中各放了一个我的组件库按钮,但无论我尝试什么,都无法使test-page中的按钮以我的库中的按钮方式呈现。

如果我在app.module.ts中导入ButtonModule,那么两个按钮都不会正确呈现。

如果我在framework.module.ts中导入ButtonModule,那么framework页面中的按钮将正确呈现,但test-page中的按钮不会。

如何正确使一个库模块在整个Angular应用程序中工作?

英文:

I have set up a simple skeleton representing my application here: https://stackblitz.com/edit/angular-e68rbx

The app module loads and hands off to a framework module which hosts the main pages in my app.

To demonstrate the problem I have put 1 of my component library buttons in each of the framework and test-page components but no matter what I try I cannot get the button in the test-page to render as a button from my library.

If I import the ButtonModule in the app.module.ts then neither button is rendered correctly.

If I import the ButtonModule in the framework.module.ts then the button in the framework page is rendered correctly, but the button in the test-page is not.

What is the correct way to get a library module working throughout an Angular app?

答案1

得分: 2

Your TestPageComponent needs to be declared anywhere. So if you don't wanna do it in the App.Module.ts so you need to do this in the Framework.Module. With lazy loading it helps for better performance. So change your framework.module.ts like this:

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FrameworkComponent } from './framework.component';
import { FrameworkRoutingModule } from './framework.routing.module';
import { ButtonModule } from 'jon-component';
import { TestPageComponent } from '../components/test-page/test-page.component';

@NgModule({
  declarations: [FrameworkComponent, TestPageComponent],
  imports: [FrameworkRoutingModule, CommonModule, ButtonModule],
  exports: [FrameworkComponent, RouterModule],
})
export class FrameworkModule {}

You see the TestPageComponent in the line declarations: [FrameworkComponent, TestPageComponent], does the trick.

英文:

Your TestPageComponent needs to be declared anywhere. So if you don't wanna do it in the App.Module.ts so you need to to this in the Framework.Module. With lazy loading it helps for better performance. So change your framework.module.ts like this:

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FrameworkComponent } from './framework.component';
import { FrameworkRoutingModule } from './framework.routing.module';
import { ButtonModule } from 'jon-component';
import { TestPageComponent } from '../components/test-page/test-page.component';

@NgModule({
  declarations: [FrameworkComponent, TestPageComponent],
  imports: [FrameworkRoutingModule, CommonModule, ButtonModule],
  exports: [FrameworkComponent, RouterModule],
})
export class FrameworkModule {}

You see the TestPageComponent in the line declarations: [FrameworkComponent, TestPageComponent], does the trick.

Angular路由和从库中导入组件

huangapple
  • 本文由 发表于 2023年2月14日 01:31:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/75439314.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定