Question

我的Angular应用程序使用Angular路由设置，并根据URL显示不同的组件。标题，导航，页脚和常用模式的模板在根应用程序模板中定义。此处还提供了<router-outlet>标记。

在我的根应用程序模板中声明的组件与将在<router-outlet>中加载的各种组件共享的最佳做法是什么？例如，假设以下模板是我的根模板：

<header-component></header-component>
<router-outlet></router-outlet>
<footer-component></footer-component>
<loading-dialog-component></loading-dialog-component>

组件Component1和Component2使用我的模块声明中指定的路由加载：

appRoutes: Routes = [
{ path: 'component1', component: Component1 },
{ path: 'component2', component: Component2 }
];

我想从Component1.component.ts以及Component2.component.ts中访问<loading-dialog-component>。这样做的最佳方式是什么？

Answer 1

您应该使用共享模块。创建共享模块允许您组织代码。您可以将常用的组件，指令和管道放入一个模块中，然后在应用程序的其他部分中将该模块仅导入到您需要的任何位置。

共享模块：

导入CommonModule，因为模块的组件需要通用指令。
声明并导出SharedComponent，SharedDirective和SharedPipe。
重新导出CommonModule和FormsModule，以便导入此SharedModule的任何其他模块可以从CommonModule访问指令，如NgIf，并且可以与FormsModule的[（ngModel）]指令绑定。

注意：尽管SharedModule可能不需要导入FormsModule，但SharedModule仍然可以导出FormsModule而不在其导入中列出它。这样，您可以为其他模块提供对FormsModule的访问权限，而无需直接将其导入应用程序中的每个其他模块。

从虚构的应用程序中考虑以下模块：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SharedComponent } from './shared.component';//just an example
import { SharedDirective } from './shared.directive';
import { SharedPipe } from './shared.pipe';

@NgModule({
 imports:      [ CommonModule ],
 declarations: [ SharedComponent , SharedDirective , SharedPipe ],
 exports:      [ SharedComponent , SharedDirective , SharedPipe ,
                 CommonModule, FormsModule ]
})
export class SharedModule { }

然后在需要共享组件的模块中导入共享模块：

@NgModule({
  imports: [
    SharedModule
  ],
  declarations: [
      //your declared modules
  ]
})
export class ConsumerOfSharedComponentsModule { }

在Angular 4+中共享常用组件的最佳做法是什么？

1 个答案: