Question

我已经在angular 6中创建了一个组件库，我想在我的组件库中全局使用Angular材质组件。

我尝试导入到app.module.ts（未公开给库）我尝试更改main.ts使其包含@NgModule并导出“ MainModule”，并且此编译很好，但似乎不是执行此操作的正确方法？

我想念什么吗？希望我能分享一些代码，但实际上甚至不知道从哪里开始。

感谢您的帮助！

Answer 1

在您的app.module.ts中。

import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
    imports: [
        CommonModule,
        MatInputModule,
        MatButtonModule
    ],
})
export class AppModule {}

在app.component.html

中

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

Answer 2

如果要在库组件中使用Angular Material组件，则应执行与常规Angular应用程序相同的操作。这意味着您应该将使用的Angular Material模块导入到库模块（和/或其子特征模块）中：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatDialogModule, MatExpansionModule, MatIconModule } from '@angular/material';

import { LibraryComponent } from './library.component';

@NgModule({
  imports: [
    CommonModule,
    MatDialogModule,
    MatExpansionModule,
    MatIconModule,
  ],
  exports: [
    LibraryComponent,
  ],
  declarations: [
    LibraryComponent
  ]
})
export class LibraryModule { }

您还可以创建一个自定义模块，其中包含所有已使用的Angular Material模块并将其导入其他模块（如本步骤的第二个代码块所述：https://material.angular.io/guide/getting-started#step-3-import-the-component-modules中所述）。

并且已经在注释中进行了描述：您不必导入BrowserAnimationsModule，但是使用您的库的项目必须将其导入。

重要的是，您在库@angular/material文件中将peerDependency定义为package.json。

在组件库中全局使用角度材料

2 个答案: