如何在不使用 NgModule 的情况下使用 Angular/Materials 而只使用 /core 中的 'Component'？

Question

我有一个使用 Angular CLI v-13.2.6 构建的功能性应用程序，我只想添加 angular material 表单和图标的强大功能。我已经在 class 中使用了 Component 装饰器，因此在尝试使用 NgModule.

时出现错误

我的问题是，有什么方法可以在我的 class/without NgModule 上使用 Component 装饰器实现 Angular/Material 吗？或者，有什么方法可以在不使用 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,
  ]
})

然而，当运行应用程序出现以下 angular 错误时：

N1006 two incompatible decorators on class.

据我了解，我不能在同一个 class.

上有 2 个装饰器

这是现有代码中的内容，不允许我更改它：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pagexx',
  templateUrl: './pagexx.html',
  styleUrls: ['./pagexx.scss']
})

Answer 1

您的应用程序中应该有一个引导模块（默认情况下称为 AppModule，可以在 src/app/app.module.ts 找到）。您从 Material 导入功能模块，方法是将它们添加到默认模块的 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>

如何在不使用 NgModule 的情况下使用 Angular/Materials 而只使用 /core 中的 'Component'？

How can I use Angular/Materials without using NgModule and only Using 'Component' from /core?

ng-modules

angular