Angular 4.4.6中能否无需模块直接导入组件？

嘿，针对你在Angular 4.4.6里想精简文件、不用给每个组件单独建模块就能实现组件间引用的需求，我来给你梳理下可行的方案——毕竟Angular 4还是基于NgModule的体系，但咱们可以尽量减少冗余文件：

核心逻辑 #

Angular 4.x的规则是：所有组件必须在某个NgModule的declarations数组中注册才能被使用。所以咱们不用给每个组件单独创建模块，而是把需要互相引用的组件统一放在同一个根模块或一个极简的共享模块里，这样就能避免不必要的文件冗余。

具体实现步骤（附代码示例） #

假设你有两个组件：ParentComponent（父组件）和ChildComponent（要导入的子组件），具体操作如下：

1. 创建子组件（仅保留组件文件） #

不用给子组件单独生成模块，只写核心的组件代码（比如child.component.ts）：

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

@Component({
  selector: 'app-child',
  template: `<p>这是要导入的子组件内容</p>`
})
export class ChildComponent { }

2. 在父组件所在模块中注册子组件 #

比如直接在根模块app.module.ts里，把ChildComponent加入declarations数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component'; // 导入子组件类

@NgModule({
  imports: [BrowserModule],
  declarations: [
    ParentComponent,
    ChildComponent // 同时声明父、子组件
  ],
  bootstrap: [ParentComponent]
})
export class AppModule { }

3. 在父组件模板中直接使用子组件 #

现在你可以在父组件的模板里直接使用子组件的选择器了：

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

@Component({
  selector: 'app-parent',
  template: `
    <h3>父组件内容</h3>
    <app-child></app-child> <!-- 直接引用子组件 -->
  `
})
export class ParentComponent { }

重要提示 #

• Angular 4.x不支持脱离NgModule直接引用组件：这是框架的硬性规则，不像Angular 14+的独立组件可以脱离模块存在，所以哪怕精简文件，也必须把组件注册到某个模块中。
• 如果后续需要复用的组件变多，可以考虑创建一个极简共享模块（仅包含declarations和exports），把复用组件放入后，在需要的模块中导入这个共享模块，既避免重复声明，又不会产生过多冗余文件。

内容的提问来源于stack exchange，提问作者BSchnitzel