我如何在不使用 NgModule 的情況下使用 Angular/Materials 而只使用 /core 中的“組件”？

Question

我有一個使用 Angular CLI v-13.2.6 構建的功能性應用程序，我只想添加 angular 材料 forms 和圖標的強大功能。 我已經在我的 class 中使用了Component裝飾器，因此在嘗試使用NgModule時出現錯誤。

我的問題是，有沒有什么方法可以在我的類上使用那個Component裝飾器/不NgModule來實現 Angular/Material？ 或者，有什么方法可以在不使用 Angular 材料的情況下獲得浮動形式？

我遵循了這里的所有說明： https://material.angular.io/guide/getting-started 。

安裝材料 -> ng 添加@angular/material

將組件導入到.ts ->

import { Component, NgModule, OnInit } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    MatFormFieldModule,
  ]
})

但是，當運行該應用程序時，出現以下 angular 錯誤：

N1006 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中找到）。 您通過將它們添加到默認模塊的imports數組來從 Material 導入功能模塊：

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>