不将其添加到模块中的声明中而呈现的角12倍分量

Question

因此，我最近开始研究角度，试图澄清组件和模块是如何工作的，以及它们是如何相互作用的。

我有一个AppComponent，它有一个路由器出口，并被添加到AppModule的声明中.但是其他两个组件并没有添加到声明中(登录和页面找不到组件)，而是将这两个组件作为路由添加到应用程序路由模块中。根据我的理解，登录和页面不应该在浏览器中呈现，除非我将它们添加到AppModule中的声明中，但现在它们确实呈现得很好。我想知道为什么？

我有分享代码从应用程序模块和应用程序路由模块下面。

应用程序模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DealerModule } from './ng-modules/dealer.module';

export const str: string = "sample string from Login Module";

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

应用程序路由模块

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { PagenotfoundComponent } from "./modules/core/pagenotfound/pagenotfound.component";
import { LoginComponent } from "./modules/login/login/login.component";

const AppRoutes: Routes = [
  {
    path: '', 
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '**',
    component: PagenotfoundComponent
  }
]

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(AppRoutes)
  ], exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

交易商模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DealerRoutingModule } from './dealer-routing.module';
import { LayoutComponent } from '../modules/core/layout/layout.component';

@NgModule({
  declarations: [LayoutComponent],
  imports: [
    CommonModule,
    DealerRoutingModule
  ]
})
export class DealerModule { }

经销商路由模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { LayoutComponent } from '../modules/core/layout/layout.component';
import { AdddealerComponent } from '../modules/dealers/adddealer/adddealer.component';
import { ListdealersComponent } from '../modules/dealers/listdealers/listdealers.component';

const AppRoutes: Routes = [
  {
    path: 'main',
    component: LayoutComponent,
    children: [
      { path: 'adddealer', component: AdddealerComponent },
      { path: 'listdealers', component: ListdealersComponent }
    ]
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(AppRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class DealerRoutingModule { }

如您所见，在DealerRoutingModule的情况下，我没有在声明中添加AddDealerComponent和ListDealersComponent，但它们也在浏览器上呈现。

要明确的是，LayoutComponent也没有模块。它仅用作AddDealer和ListDealers组件的主布局，用于承载导航条和侧边栏，以及路由器出口。

如果我从交易商模块中的声明中删除布局组件，应用程序将通过编译时异常。为什么声明中需要布局组件，而AddDealer和ListDealers组件却不需要？

Answer 1

声明/导入语句是角(而不是TypeScript)，它们是通过selector属性在html中呈现组件所必需的，

但

如果您只是从一个 TypeScript 文件导出一个类并将其导入另一个TypeScript文件中，那么它将工作，因为它是一个简单的TypeScript执行，

由于您告诉它确切的文件，它可以找到组件( TS类)：

import { LoginComponent } from "./modules/login/login/login.component";

然后，如果您尝试以以下格式引用该组件作为lib的一部分，则有可能：

import { LoginComponent } from '@MyWorkspace/login';

它肯定会失败

router还使用TypeScript调用，并且不需要selector-to-calss反射，因此不使用或不需要角声明/导出机制。