时间戳

首页 > 解决方案 > 如何用组件替换容器？

angular - 如何用组件替换容器？

问题描述

我有必须显示不同组件的侧边栏组件取决于事件数据。

现在在应用程序的任何地方我使用Subject()数据发送命令：

{data: {}, type: "showSearch"} 
{data: {}, type: "showResultSearch"}
{data: {}, type: "showUserBlock"} 
{data: {}, type: "showContacts"}

然后在SideBarComponent我听这些数据并应用于变量类型：

this.events.listen().subject((data) => {
     this.type = data.type;
);

然后在模板里面SideBarComponent我做：

<app-search *ngIf="type === 'showSearch'"></app-search>
<app-result-search *ngIf="type === 'showResultSearch'"></app-result-search>
<app-user-block *ngIf="type === 'showUserBlock'"></app-user-block>
<app-contracts *ngIf="type === 'showContacts'"></app-contacts>

那么，如何更优雅地解决这个问题呢？现在我有超过 10 个组件。

标签： angularangular6angular8

解决方案

您可以使用对象并动态渲染组件，而不是块*ngIf甚至是块，如下所示：ngSwitch

角度 < 9：

模块：

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

import { AppComponent } from './app.component';
import { ContactsComponent } from './contacts.component.ts';
import { ResultSearchComponent } from './result-search.component.ts';
import { SearchComponent } from './search.component.ts';
import { UserBlockComponent } from './user-block.component.ts';

const ENTRY_COMPONENTS = [
  ContactsComponent,
  ResultSearchComponent,
  SearchComponent,
  UserBlockComponent,
];
const DECLARATIONS = [
  ...ENTRY_COMPONENTS,
  AppComponent,
];

@NgModule({
  bootstrap: [AppComponent],
  declarations: DECLARATIONS,
  imports: [BrowserModule],
  entryComponents: ENTRY_COMPONENTS,
})
export class AppModule {}

组件：

import { Component, Type } from '@angular/core';

import { switchMap } from 'rxjs/operators';

import { ContactsComponent } from './contacts.component';
import { ResultSearchComponent } from './result-search.component';
import { SearchComponent } from './search.component';
import { UserBlockComponent } from './user-block.component';

const componentsMapper = {
  showContacts: ContactsComponent,
  showResultSearch: ResultSearchComponent,
  showSearch: SearchComponent,
  showUserBlock: UserBlockComponent,
  // others
};

角 9：

模块：

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

import { AppComponent } from './app.component';

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

组件：

import { Component, Type } from '@angular/core';

import { switchMap } from 'rxjs/operators';

const componentsMapper = {
  showContacts: import('./contacts.component').then(({ ContactsComponent }) => ContactsComponent),
  showResultSearch: import('./result-search.component').then(({ ResultSearchComponent }) => ResultSearchComponent),
  showSearch: import('./search.component').then(({ SearchComponent }) => SearchComponent),
  showUserBlock: import('./user-block.component').then(({ UserBlockComponent }) => UserBlockComponent),
  // others
};

任何Angular版本的通用代码（9 到以下）：

模板：

<ng-template [ngComponentOutlet]="ngComponentOutlet$ | async"></ng-template>

组件：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  readonly ngComponentOutlet$ = this.events.listen().pipe(
    switchMap(data => this.loadComponent(data.type))
  );

  async loadComponent(type: string): Promise<Type<any>> {
    return await componentsMapper[type];
  }
}

您可能已经注意到，两个版本之间的区别仅在于，在 Angular 9 中，不需要将动态组件添加到entryComponents部分，@NgModule甚至不需要添加到声明中。代码可以根据需要真正动态地导入。

Angular < 9 演示

Angular 9 演示

阅读更多：

https://medium.com/angular-in-depth/asynchronous-modules-and-components-in-angular-ivy-1c1d79d45bd3

https://medium.com/angular-in-depth/lazy-load-components-in-angular-596357ab05d8

https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a

推荐阅读