Angular：在根目录中提供组件答案

【问题标题】：Angular: provide component in rootAngular：在根目录中提供组件
【发布时间】：2023-02-13 18:46:46
【问题描述】：

我正在学习角度，我写了一个角度项目有文件结构：File structure of angular project

数据表.component.ts：

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

@Component({
    selector: 'app-data-table',
    templateUrl: './data-table.component.html',
    styleUrls: ['./data-table.component.scss'],
})
export class DataTableComponent {
    @Input() dataTableConfig: any;
    @Input() dataContent: any;
}

主题.module.ts：

import { TableComponent } from './Layout/table/table.component';

@NgModule({
    declarations: [
        TableComponent,
    ],
    imports: [CommonModule, RouterModule],
    providers: [],
})
export class ThemeModule {}

应用程序模块.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { ThemeModule } from './theme/theme.module';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AppRoutingModule, HttpClientModule, RouterModule, ThemeModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

路由器.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RoutersRoutingModule } from './routers-routing.module';

@NgModule({
    declarations: [],
    imports: [CommonModule, RoutersRoutingModule],
})
export class RoutersModule {}

类别.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CategoryRoutingModule } from './category-routing.module';
import { TestCategoryComponent } from './test-category/test-category.component';

@NgModule({
    declarations: [TestCategoryComponent],
    imports: [CommonModule, CategoryRoutingModule],
})
export class CategoryModule {}

测试类别.component.ts：

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

@Component({
  selector: 'app-test-category',
  templateUrl: './test-category.component.html',
  styleUrls: ['./test-category.component.scss']
})
export class TestCategoryComponent {
  dataTableConfig = [//...some data];
  dataContent = [//...some data];
}

如何在test-category.component.html 或任何我想要的地方使用<app-data-table [dataTableConfig]='dataTableConfig' [dataContent]='dataContent'>

当我尝试它时，错误是：

'app-data-table' 不是已知元素：

如果“app-data-table”是一个 Angular 组件，则验证它是该模块的一部分。

如果“app-data-table”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。

【问题讨论】：

标签： angular

【解决方案1】：

你应该像这样将你的组件引入角度模块：

@NgModule({
declarations: [AppComponent],
imports: [DataTableComponent],
providers: [],
bootstrap: [AppComponent],
})

【讨论】：

这将不起作用，除非 DataTableComponent 是独立的，但它不是

【解决方案2】：

TestCategoryComponent 使用它在 CategoryModule 中声明的模块来查找其他组件。

它可以使用声明数组中的声明组件
或者
CategoryModule 导入的模块中的任何导出组件。

我推荐 SCAM（单组件角度模块）方法，

@NgModule({
    declarations: [DataTableComponent],
    exports: [DataTableComponent]
})
export class DataTableModule {}

然后将DataTableModule导入CategoryModule。由于导入的模块导出DataTableComponent，因此在此上下文中可用。

从 Angular 15 开始，您可以使组件独立并像模块一样导入它们（它们保留自己的上下文并根据需要通过 Component 装饰器中的 imports 数组导入 NgModules 或其他独立组件）。

@Component({
    standalone: true, // <----------------------
    selector: 'app-data-table',
    templateUrl: './data-table.component.html',
    styleUrls: ['./data-table.component.scss'],
})
export class DataTableComponent {
    @Input() dataTableConfig: any;
    @Input() dataContent: any;
}

【讨论】：