我将尝试把 Angular Material 应用于一个 Angular Library。
我已经完成以下步骤:
1. 创建项目。
我已经完成以下步骤:
1. 创建项目。
ng new test-project
- 添加 Angular Material
ng add @angular/material
- 创建库
ng g library test-lib
- 在test-lib package.json文件中将angular material添加为对等依赖
"peerDependencies": {
"@angular/common": "^7.2.0",
"@angular/core": "^7.2.0",
"@angular/material": "^7.3.7"
}
在test-lib-component中添加一个Angular Material CheckBox的HTML。
@Component({
selector: 'test-lib',
template: `
<p>
test!
</p>
<mat-checkbox>my checkbox</mat-checkbox>
`,
styles: []
})
- 构建库
ng build test-lib --watch
- 在应用程序中的app.module中添加对test-lib组件的引用
import { TestLibComponent } from 'test-lib'
@NgModule({
declarations: [
AppComponent,
TestLibComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- 在库项目中,我在test-lib.module中添加了对Angular Material CheckBox模块的引用。
import { NgModule } from '@angular/core';
import { ControlLibraryComponent } from './control-library.component';
import { MatCheckboxModule } from '@angular/material/checkbox';
@NgModule({
declarations: [TestLibComponent],
imports: [
MatCheckboxModule
],
exports: [TestLibComponent]
})
export class TestLibModule { }
- 最后,在主应用程序的 app.component.html 文件中,使用正确的选择器添加库的 html 代码:
<test-lib></test-lib>
现在我运行应用程序时出现以下错误信息:
'mat-checkbox' 不是已知的元素: 1. 如果 'mat-checkbox' 是一个 Angular 组件,请确认它已经被加载到了该模块中。
显然,这是当引用缺失时标准的错误信息,但因为我已经添加了它们,所以我在想是否还需要在库内做其他事情以使其正常工作?
谢谢
TestLibModule
中导出MatCheckboxModule
了吗?尝试使用exports: [TestLibComponent, MatCheckboxModule]
。 - Benjamin O. P.export { MatCheckboxModule } from '@angular/material/checkbox'
; - Kushal Jayswal