Angular2 动态创建组件实现 Tab 选项卡

前言

在前端开发中，Tab 选项卡是一个非常常见的组件。而在 Angular2 中，我们可以通过动态创建组件的方式来实现 Tab 选项卡。

本文将介绍如何使用 Angular2 动态创建组件实现 Tab 选项卡，并给出详细的示例代码。

Tab 选项卡的实现方法

在 Angular2 中，我们可以使用 ngComponentOutlet 指令来动态创建组件。

具体实现方法如下：

1. 定义一个 Tab 组件，用于展示选项卡内容。

// javascriptcn.com 代码示例
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-tab',
  template: `
    <div *ngIf="active">
      <ng-content></ng-content>
    </div>
  `,
})
export class TabComponent {
  @Input() title: string;
  @Input() active = false;
}

1. 在父组件中定义 Tab 组件的数据：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  template: `
    <div>
      <ul>
        <li *ngFor="let tab of tabs; let i = index" (click)="activateTab(i)" [class.active]="tab.active">
          {{ tab.title }}
        </li>
      </ul>
      <div>
        <ng-container *ngFor="let tab of tabs">
          <app-tab [title]="tab.title" [active]="tab.active">
            {{ tab.content }}
          </app-tab>
        </ng-container>
      </div>
    </div>
  `,
})
export class TabsComponent {
  public tabs = [
    {
      title: 'Tab 1',
      content: 'Tab 1 content',
      active: true,
    },
    {
      title: 'Tab 2',
      content: 'Tab 2 content',
      active: false,
    },
    {
      title: 'Tab 3',
      content: 'Tab 3 content',
      active: false,
    },
  ];

  public activateTab(index: number): void {
    this.tabs.forEach((tab, i) => {
      tab.active = i === index;
    });
  }
}

1. 在父组件的模板中使用 ngComponentOutlet 指令动态创建 Tab 组件：

// javascriptcn.com 代码示例
import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { TabComponent } from './tab.component';

@Component({
  selector: 'app-dynamic-tabs',
  template: `
    <div>
      <ul>
        <li *ngFor="let tab of tabs; let i = index" (click)="activateTab(i)" [class.active]="tab.active">
          {{ tab.title }}
        </li>
      </ul>
      <div #tabContent></div>
    </div>
  `,
})
export class DynamicTabsComponent {
  public tabs = [
    {
      title: 'Tab 1',
      content: 'Tab 1 content',
      active: true,
    },
    {
      title: 'Tab 2',
      content: 'Tab 2 content',
      active: false,
    },
    {
      title: 'Tab 3',
      content: 'Tab 3 content',
      active: false,
    },
  ];

  @ViewChild('tabContent', { read: ViewContainerRef }) tabContent: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  public activateTab(index: number): void {
    this.tabs.forEach((tab, i) => {
      tab.active = i === index;
    });

    this.tabContent.clear();

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TabComponent);
    const componentRef = this.tabContent.createComponent(componentFactory);
    const instance = componentRef.instance as TabComponent;
    instance.title = this.tabs[index].title;
    instance.active = true;
  }
}

示例代码

完整示例代码如下：

// javascriptcn.com 代码示例
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-tab',
  template: `
    <div *ngIf="active">
      <ng-content></ng-content>
    </div>
  `,
})
export class TabComponent {
  @Input() title: string;
  @Input() active = false;
}

@Component({
  selector: 'app-tabs',
  template: `
    <div>
      <ul>
        <li *ngFor="let tab of tabs; let i = index" (click)="activateTab(i)" [class.active]="tab.active">
          {{ tab.title }}
        </li>
      </ul>
      <div>
        <ng-container *ngFor="let tab of tabs">
          <app-tab [title]="tab.title" [active]="tab.active">
            {{ tab.content }}
          </app-tab>
        </ng-container>
      </div>
    </div>
  `,
})
export class TabsComponent {
  public tabs = [
    {
      title: 'Tab 1',
      content: 'Tab 1 content',
      active: true,
    },
    {
      title: 'Tab 2',
      content: 'Tab 2 content',
      active: false,
    },
    {
      title: 'Tab 3',
      content: 'Tab 3 content',
      active: false,
    },
  ];

  public activateTab(index: number): void {
    this.tabs.forEach((tab, i) => {
      tab.active = i === index;
    });
  }
}

@Component({
  selector: 'app-dynamic-tabs',
  template: `
    <div>
      <ul>
        <li *ngFor="let tab of tabs; let i = index" (click)="activateTab(i)" [class.active]="tab.active">
          {{ tab.title }}
        </li>
      </ul>
      <div #tabContent></div>
    </div>
  `,
})
export class DynamicTabsComponent {
  public tabs = [
    {
      title: 'Tab 1',
      content: 'Tab 1 content',
      active: true,
    },
    {
      title: 'Tab 2',
      content: 'Tab 2 content',
      active: false,
    },
    {
      title: 'Tab 3',
      content: 'Tab 3 content',
      active: false,
    },
  ];

  @ViewChild('tabContent', { read: ViewContainerRef }) tabContent: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  public activateTab(index: number): void {
    this.tabs.forEach((tab, i) => {
      tab.active = i === index;
    });

    this.tabContent.clear();

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TabComponent);
    const componentRef = this.tabContent.createComponent(componentFactory);
    const instance = componentRef.instance as TabComponent;
    instance.title = this.tabs[index].title;
    instance.active = true;
  }
}

总结

本文介绍了使用 Angular2 动态创建组件实现 Tab 选项卡的方法，并给出了详细的示例代码。希望对读者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655def2bd2f5e1655d83a7dd