如何用组件替换容器？

Question

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

现在在应用程序的任何地方我使用 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 个组件。

Answer 1

我想我会推荐你使用路由器及其功能，我想说这些组件似乎应该由你的应用程序的 url 显示。

url 表示您正在为 egz:

访问哪个资源

my-app/search

my-app/contacts

https://angular.io/guide/router

Answer 2

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

Angular < 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
};

Angular 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 DEMO

Angular 9 DEMO

阅读更多：

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

如何用组件替换容器？

How to replace container by components?

angular

angular6

angular8