Как я могу использовать Angular/Materials без использования NgModule и только с использованием «Компонента» из/ядра?
У меня есть функциональное приложение, созданное с помощью Angular CLI v-13.2.6, и я просто хочу добавить замечательные функции угловых форм и значков. Я уже использую декоратор Component в своем классе, поэтому при попытке использовать NgModule я получаю сообщение об ошибке.
Мой вопрос: есть ли способ реализовать Angular/Material с этим декоратором Component в моем классе/без NgModule? Или есть ли способ получить плавающие формы без использования Angular Material?
Я выполнил все инструкции здесь: https://material.angular.io/guide/getting-started.
install materials -> ng add @angular/material
import component to .ts ->
import { Component, NgModule, OnInit } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
@NgModule({
imports: [
MatFormFieldModule,
]
})
Однако при запуске приложения я получаю следующую угловую ошибку:
N1006 two incompatible decorators on class.
Из того, что я прочитал, я понимаю, что у меня не может быть 2 декоратора в одном классе.
Это то, что есть в существующем коде, и мне не разрешено его менять:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-pagexx',
templateUrl: './pagexx.html',
styleUrls: ['./pagexx.scss']
})
Ответы 1
В вашем приложении должен быть загрузочный модуль (по умолчанию он называется AppModule, его можно найти по адресу src/app/app.module.ts). Вы импортируете функциональные модули из Материала, добавляя их в массив imports для вашего модуля по умолчанию:
import { FooComponent } from './foo/foo.component';
import { MatFormFieldModule } from '@angular/material/form-field';
@NgModule({
declarations: [
FooComponent /* <-- Your components/pages */
],
imports: [
MatFormFieldModule /* <-- Any Material imports */
]
})
export class AppModule { }
Затем вы можете использовать импортированную функцию в своих компонентах. Вам не нужно ничего добавлять в свой декоратор @Component:
@Component({
selector: 'app-foo',
template: './foo.component.html',
styles: []
})
export class FooComponent { }
<p>This is the template for FooComponent.</p>
<mat-form-field>
<input placeholder = "Start typing...">
</mat-form-field>
Даже после того, как я добавил код в нужный файл, все еще получаю сообщение «не могу получить/». Я понял, что использую версию «Материал», не поддерживаемую моей локальной версией angular. Теперь я использую импорт {MatSelectModule} из «@angular/material/select»; для Angular 9 и его работы !! спасибо!
Привет, ДМ, спасибо за руководство, теперь я вижу, что добавлял код не в тот файл, прямо в компонент, а не в файл src/app/app.module.ts.