Question

我的应用希望拥有多种类型的progress-loader-animations（spinner / bar / etc。

因此，我创建了一个带有组件的模块。我现在如何在我的main-component中显示该模块的微调框？

Answer 1

将课程ProgressLoaderAnimations导入您的课程顶部 app.module.ts。并将其添加到declarations:数组
使用Angular @Component目录中引用的选择器字符串在自定义进度加载程序组件的html模板中。

import { ProgressLoaderAnimations } from './progress-loader-animations';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    ProgressLoaderAnimations // Note this.
  ],
  providers: [
    BackendService,
    HeroService,
    Logger
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

@Component({
  selector: 'progress-loader-animations',
  templateUrl: './hero-list.component.html',
  providers: []
})
export class ProgressLoaderAnimations implements OnInit {

  /* . . . */
}

有更多的信息（例如您的代码）或plnkr，stackblitz等信息很好。

这里概述的步骤应该是足够的信息，可以解决您的组件问题，并在必要时进一步阅读Angular教程。

可以对加载组件进行其他优化，例如（延迟加载）。

组件参考：https://angular.io/guide/architecture-components

循序渐进的演练应该像我一样对您极端有益。 https://angular.io/tutorial

Googled Stackblitz example of HeroDetailComponent used in HeroListComponent

Angular 5-在组件中显示模块

1 个答案: