单击选项卡时,我需要在angular2中加载特定组件

发布时间：2020-12-17 17:29:30 所属栏目：安全来源：网络整理

导读：我正在尝试在选项卡中加载组件.在单击特定选项卡时,我需要加载特定组件.但是它在导航到该组件时加载所有组件. html的 p-tabView orientation="left" (onChange)="onTabChange($event)" p-tabPanel *ngFor="let item of items" style="border: solid 1px; pad

我正在尝试在选项卡中加载组件.在单击特定选项卡时,我需要加载特定组件.但是它在导航到该组件时加载所有组件.

html的

<p-tabView orientation="left" (onChange)="onTabChange($event)">
       <p-tabPanel *ngFor="let item of items" style="border: solid 1px; padding: 20px;margin: 20px;" [selected]="activeTabIndex==i">
              <strong> When you click here,I should load the <span style="color:red"> {{item.name}} </span>
              component below</strong> <br />

              <ng-container *ngComponentOutlet="childmap[item.name] "></ng-container>

          <br />
        </p-tabPanel>
</p-tabView>

.TS

@Component({
  selector: 'my-app',templateUrl:'dashboard.html' 
  `
})
export class App {
 activeTabIndex: number = 0;

childmap = {
        'slider': sliderComponent,'user': usersComponent,'alert danger': AlertDangerComponent
         }


items:Array<any> = [
    {
      name: 'slider' 
    },{
      name: 'user'
    },{
      name: 'alert danger'
    }

      ]
 onTabChange(event: any) {
        this.activeTabIndex = event.index;
    }
  }

解决方法

这种事情有很多解决方案.请使用ngComponentOutlet完成的工作.

这是tab-container：

import {Component,Input} from '@angular/core'
import {TabContentAlternativeComponent} from './tab-content-alternative.component'
import {BasicContent} from './basic-content'

@Component({
  selector: 'tab',template: ''
})
export class TabComponent {
  @Input() title: string;
  @Input() contentRef: BasicContent;
  active = false;
}

这是一个非常简单的组件,它知道自己的选项卡名称,活动状态和主体组件引用,当有人选择选项卡时应该加载它们.

然后我们创建几个将动态加载的主体组件：

export class BasicContent {

}

组件1

import {Component,Input,OnInit} from '@angular/core'
import {BasicContent} from './basic-content'

@Component({
  selector: 'tab-content',template: `
      <p>Hey</p>
  `,})
export class TabContentComponent extends BasicContent {
}

第2部分

import {Component,Input} from '@angular/core'
import {BasicContent} from './basic-content'

@Component({
  selector: 'tab-content-alternative',template: `
      <p>Hey,this is an alternative content</p>
  `,})
export class TabContentAlternativeComponent extends BasicContent {
}

以下是带有选项卡呈现的tabs-container组件以及动态主体组件的空占位符：

import {AfterContentInit,Component,ContentChildren,QueryList} from '@angular/core'
import {TabComponent} from './tab.component'
import {BasicContent} from 'basic-content'

import 'rxjs/Rx';
import {Observable,BehaviorSubject} from 'rxjs/Rx';

@Component({
  selector: 'tab-container',template: `
    <div class="tab-header">
      <div class="tab" *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">{{tab.title}}</div>
    </div>

    <div class="tab-content">
      <ng-container *ngComponentOutlet="content | async"></ng-container>
    </div>
  `,})
export class TabContainerComponent implements AfterContentInit {
  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;

  private contentSbj = new BehaviorSubject<BasicContent>(null);
  content = this.contentSbj.asObservable();

  ngAfterContentInit() {
    const activeTabs = this.tabs.filter((tab) => tab.active);
    if (activeTabs.length === 0) {
      this.selectTab(this.tabs.first);
    }
  }

  selectTab(tab: TabComponent) {
    this.tabs.toArray().forEach(tab => tab.active = false);
    tab.active = true;
    this.contentSbj.next(tab.contentRef);
  }
}

TitleMapping

import {TabContentComponent} from './tab-content.component';
import {TabContentAlternativeComponent} from './tab-content-alternative.component';

interface TitleMapping {
  title: string;
  contentComponent: BasicContent;
}

export const allTabs: TitleMapping[] = [
  {title: "Tab 1",contentComponent: TabContentComponent},{title: "Tab 2",contentComponent: TabContentAlternativeComponent},{title: "Tab 3",contentComponent: TabContentComponent}
]

这就是它在某些父组件中的使用方式：

import {TabContentComponent} from './tab/tab-content.component'
import {TabContentAlternativeComponent} from './tab/tab-content-alternative.component'

@Component({
  selector: 'my-app',template: `
    <tab-container>
      <tab title="Tab 1" [contentRef]="normalContent"></tab>
      <tab title="Tab 2" [contentRef]="alternativeContent"></tab>
    </tab-container>
  `,})
export class App {
  normalContent = TabContentComponent;
  alternativeContent = TabContentAlternativeComponent;
}

这是工作Plunkr

我已经将这个用于我的项目并且正常工作作为您的要求.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!