javascript - 单击标题时 Angular 2 动态加载选项卡

Question

我使用 Angular 2 开发了一个自定义选项卡组件，它运行良好。 这是它的用法。

<us-tab-verticle>
    <vtab-content [tabTitle]="'Basic Information'"><basic-info> </basic-info></vtab-content>
    <vtab-content [tabTitle]="'VAT Settings'"><vat-settings> </vat-settings></vtab-content>
    <vtab-content [tabTitle]= "'Economy Settings'"><economy-settings> </economy-settings></vtab-content>
    <vtab-content [tabTitle]="'Access Profiles'"><access-profiles> </access-profiles></vtab-content>
</us-tab-verticle>

问题是当 View 加载时所有选项卡组件都在加载。

我的标签实现如下。

us-tab-verticle.component.html

<div class="v-tabs">
  <div class="v-tabs-col v-tabs-left">
    <ul class="nav nav-v-tabs flex-column" role="tablist">
      <li class="nav-v-item" *ngFor="let tab of tabs" (click)="selectTab(tab)">
        <a [class.active]="tab.active" class="nav-v-link" data-toggle="tab" href="#" role="tab">{{tab.title}}</a>
      </li>
    </ul>
  </div>

  <div class="v-tabs-col v-tabs-fill">
    <div class="v-tabs-content">
      <div>
      <ng-content></ng-content>
      </div>
    </div>
  </div>

us-tab-verticle.component.ts

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { VtabContentComponent } from './vtab-content/vtab-content.component';

@Component({
  selector: 'us-tab-verticle',
  templateUrl: './us-tab-verticle.component.html',
  styleUrls: ['./us-tab-verticle.component.scss']
})
export class UsTabVerticleComponent implements AfterContentInit {

  @ContentChildren(VtabContentComponent) tabs: QueryList<VtabContentComponent>;

  // contentChildren are set
  ngAfterContentInit() {
    // get all active tabs
    const activeTabs = this.tabs.filter((tab) => tab.active);

    // if there is no active tab set, activate the first
    if (activeTabs.length === 0) {
      this.selectTab(this.tabs.first);
    }
  }

  selectTab(tab: VtabContentComponent) {
    // deactivate all tabs
    this.tabs.toArray().forEach(tab => tab.active = false);

    // activate the tab the user has clicked on.
    tab.active = true;
  }

}

vtab-content.component.html

<div class="tab-content v-tab-content align-content-stretch">
  <div [hidden]="!active" class="tab-pane active" role="tabpanel">
    <ng-content></ng-content>
  </div>
</div>

vtab-content.component.ts

import { Component, Input } from '@angular/core';
import { NgComponentOutlet } from '@angular/common';

@Component({
  selector: 'vtab-content',
  templateUrl: './vtab-content.component.html',
  styleUrls: ['./vtab-content.component.scss']
})

export class VtabContentComponent  {
  @Input('tabTitle') title: string;
  @Input() active = false;
}

我需要在单击每个选项卡的标题时加载每个组件。 我播种NgComponentOutlet可以用于这种情况。但不知道如何实现。

Answer 1

有很多解决方案，如果你想改进你的解决方案，我建议使用*ngIf。但请注意，每次 *ngIf 状态更改时，您都会销毁并创建一个新组件。

我建议你看一下 RouterModule 使用 children 属性。

一个小示例:(不确定您是否可以立即让它工作，但我在我的应用程序中使用了类似的东西)

// Router.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
    {
        path: '',
        children: [
            { path: 'tab1', component: Tab1Component },
            { path: 'tab2', component: Tab2Component },
        ]
    },
    { path: '**', redirectTo: '' } // modify for default tab?
];


@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

export const routedComponents = [Tab1Component, Tab2Component];

// AppModule.ts
imports: [AppRoutingModule]
declarations: [
    routedComponents
],

// main.html
<app-header>
<us-tab-verticle>
<div class="tab" [routerLink]="['/tab1']"><a>
<div class="tab" [routerLink]="['/tab2']"><a>
<router-outlet></router-outlet> // the content of your tab components will be displayed below
<app-footer>

在我看来，这种方式让您的应用更易于阅读(声明式路由)，而不是使用外部服务和组件来管理选项卡的状态。