Используйте угловой материал глобально с библиотекой компонентов - PullRequest
Новая
       28

Используйте угловой материал глобально с библиотекой компонентов

0 голосов
/ 19 сентября 2018

Я создал библиотеку компонентов в angular 6, и я хотел бы использовать компоненты материала Angular глобально в моей библиотеке компонентов.

Я попытался импортировать в app.module.ts (не предоставляется библиотеке)) Я пытался изменить мои main.ts, чтобы включить @NgModule и экспортировать «MainModule», и это нормально скомпилировано, но просто не похоже на правильный способ сделать это?

Я что-то упустил?Жаль, что у меня не было кода для обмена, но я даже не знаю, с чего начать.

Любая помощь приветствуется !!

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Если вы хотите использовать компоненты 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 библиотеки.

0 голосов
/ 19 сентября 2018

В вашем 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>
...