Angular 延迟加载组件和服务

Question

你可以向我解释一些事实吗？我有这个代码

共享服务.ts

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  id = (new Date()).getTime();
}

main.ts

export const ROUTES: Route[] = [
  {
      path: 'lazycomp',
      loadComponent: () =>
          import('./lazycomp.component').then(
              (mod) => mod.LazycompComponent
          ),
  },
];

@Component({
  selector: 'app-root',
  standalone: true,
  template: `

    {{serv.id}}

    @if(!(loaded$ | async)) {
      <button (click)="load()">
          Load advanced settings
      </button>
    }
    <ng-container *ngComponentOutlet="comp" />
  `,
  imports:[CommonModule],
  providers: []
})
export class App {
  loaded$ = new BehaviorSubject<boolean>(false);
  comp: any;

  readonly serv = inject(SharedService);

  async load() {
    this.comp = await import('./lazycomp.component').then((mod) => mod.LazycompComponent);
    console.log(this.comp);
    this.loaded$.next(true);
  }
}

bootstrapApplication(App);

lazycomp.组件

@Component({
  selector: 'app-lazycomp',
  standalone: true,
  imports: [LazycompimpComponent],
  template: `
    lazy  =  {{serv.id}}
  `,
  styles: ``,
  providers: []
})
export class LazycompComponent {
  readonly serv = inject(SharedService);
}

lazycompimp.组件

@Component({
  selector: 'app-lazycompimp',
  standalone: true,
  imports: [],
  template: ``,
  styles: ``,
  providers: [SharedService]
})
export class LazycompimpComponent {

}

我按下按钮，加载

lazycomp

并获得

1717188440363 lazy = 1717188440363

。

好的。服务实例是单例的并且位于根注入器上。

之后我将

providers: [SharedService]

添加到

lazycomp

并得到

1717189116834 lazy = 1717189194305

如何运作？为什么lazycomp中的

imports: [LazycompimpComponent]

不把SharedService交给providers？

我认为延迟加载模块（也是独立组件模块？）创建自己的根注入器。

Answer 1

每个急切加载的模块都会在根注入器中设置提供程序。 这包括嵌套模块中的嵌套导入。

延迟加载的模块将创建自己的注入器（因为您无法将提供程序添加到现有的注入器）。