如何在Angular懒加载Login组件中访问全局Dashboard组件？

没问题，我来一步步带你完成这个需求，这是Angular中复用全局组件的标准方案，全程都是规范操作，很容易上手：

1. 先搞定Shared模块（核心载体） #

Shared模块就是用来统一管理全局复用组件的“中转站”——它负责声明我们的Dashboard组件，并且把它导出，这样其他模块只要导入SharedModule，就能直接用这个组件了。

如果还没有shared.module.ts，就新建一个，代码如下（记得替换成你实际的Dashboard组件路径）：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard/dashboard.component'; // 你的Dashboard组件路径

@NgModule({
  declarations: [
    DashboardComponent // 在这里声明Dashboard组件
  ],
  imports: [
    CommonModule
  ],
  exports: [
    DashboardComponent // 关键！必须导出，否则其他模块看不到这个组件
  ]
})
export class SharedModule { }

2. 让根模块AppModule接入Shared模块 #

把SharedModule导入到AppModule里，这样整个应用的根层级就能使用Dashboard组件，同时确保SharedModule的共享逻辑能正常生效：

修改app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module'; // 导入SharedModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule // 把SharedModule加到这里
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 给懒加载的UsersModule也导入SharedModule #

因为UsersModule是懒加载的，它是一个独立的模块上下文，必须手动导入SharedModule才能拿到里面的Dashboard组件：

修改users.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UsersRoutingModule } from './users-routing.module';
import { LoginComponent } from './login/login.component';
import { SharedModule } from '../shared/shared.module'; // 导入SharedModule（注意路径要对）

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    UsersRoutingModule,
    SharedModule // 加入这一行，Login组件就能访问Dashboard了
  ]
})
export class UsersModule { }

4. 最后在Login组件模板里直接用Dashboard #

现在你可以像使用本地组件一样，在login.component.html里调用Dashboard组件了，记得用组件的正确选择器（比如你在Dashboard.component.ts里定义的selector: 'app-dashboard'）：

<!-- login.component.html -->
<h2>登录页面</h2>
<p>下面是全局的Dashboard组件：</p>
<app-dashboard></app-dashboard>

几个要注意的小细节 #

• 绝对不要在多个模块里重复声明Dashboard组件！只能在SharedModule里声明一次，其他模块全靠导入SharedModule来使用，否则Angular会报错。
• Shared模块只放全局复用的内容（组件、管道、指令），别把业务相关的模块或组件塞进去，保持它的纯粹性。
• 检查Dashboard组件的选择器是否正确，模板里的标签要和组件类里的selector属性完全一致。

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