javascript - Angular 2 中的事件选项卡问题 - 选项卡

Question

需要帮助解决 Angular 2 应用程序中的事件选项卡问题。

Plunker link

我正在从 json 加载选项卡和相应信息。

我有复杂的json格式，但我在这里做了简化版本。

问题:初始阶段未设置事件标签。

预期:第一个选项卡'Tab 1' 需要有active 类。

请注意:单击选项卡时，事件类 已被添加。因此需要修复第一个元素 的事件选项卡。所以我们应该干涉其他功能。

感谢任何帮助。

JSON

[
      {
        "id": "1",
        "name": "Tabs 1",
        "content": [
          {
            "header": "Basic Information",
            "contents": [
              {
                "label": "Report 1"
              }
            ]
          }
        ]
      },
      {
        "id": "2",
        "name": "Tabs 2",
        "content": [
          {
            "header": " Information",
            "contents": [
              {
                "label": "Report 2"
              }
            ]
          }
        ]
      },
      {
        "id": "3",
        "name": "Tabs 3",
        "content": [
          {
            "header": " report",
            "contents": [
              {
                "label": "Report 3"
              }
            ]
          }
        ]
      },
      {
        "id": "4",
        "name": "Tabs 4",
        "content": [
          {
            "header": " content Report",
            "contents": [
              {
                "label": "Report 4"
              }
            ]
          }
        ]
      }
    ]

app-service.ts

import { Injectable }     from '@angular/core';
import { Http, Response }     from '@angular/http';
import { Observable }     from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()

export class DashboardService {
  private _url: string = "./app/report.json";

  constructor(private _http: Http) {}

  getRecords() {
    return this._http.get(this._url)
      .map((response: Response) => response.json())

  }

  _errorHandler(error: Response) {
    console.error(error);
    return Observable.throw(error || "Server Error");
  }

}

app.component.ts

import {Component,ContentChildren,QueryList, OnInit, 
Injectable, Inject} from '@angular/core';
    import {TAB_COMPONENTS} from './tabset';
    import {Tab} from './tab';
    import { DashboardService } from './app-service';

    @Component({
      selector: 'my-app',
      template: `
            <h2>App Component</h2>
         <tabset>
          <tab *ngFor="let tab of records" [title]="tab.name"> 
            <div *ngFor="let header of tab.content">
            {{header.header}}
            <div *ngFor="let label of header.contents">{{label.label}}</div>
            </div>
          </tab>
        </tabset>
        `
    })
    @Injectable()
    export class AppComponent implements OnInit {
      records = [];
      errorMsg: string;

      constructor(@Inject(DashboardService) private _dashboardService: DashboardService) {
        //this.getRecords();
      }

      // getting json values from report.json
      // To build the form
      ngOnInit() {
        this._dashboardService.getRecords()
          .subscribe(
            resGetRecords => {
              debugger;

              this.records = resGetRecords

            },
            resRecordsError => this.errorMsg = resRecordsError
          );
      }
    }

tab.ts

import { Component, Input } from "@angular/core";

@Component({
  selector: 'tab',
  template: `
    <ng-content *ngIf="active"></ng-content>
  `
})
export class Tab {

  @Input() title = '';
  @Input() active = false;
  @Input() disabled = false;

}

tabset.ts

import {
  Component,
  Input,
  Output,
  ContentChildren,
  HostListener,
  EventEmitter
} from '@angular/core';

import { Tab } from './tab';

@Component({
  selector: 'tabset',
  template: `
    <section class="tab-set">
      <ul
        class="nav"
        [class.nav-pills]="vertical"
        [class.nav-tabs]="!vertical">
        <li
          *ngFor="let tab of tabs"
          [class.active]="tab.active">
          <a
            (click)="tabClicked(tab)"
            class="btn"
            [class.disabled]="tab.disabled">
            <span>{{tab.title}}</span>
          </a>
        </li>
      </ul>
      <div class="tab-content">
        <ng-content></ng-content>
      </div>
    </section>
  `
})
export class Tabset {

  @Input() vertical;
  @Output() onSelect = new EventEmitter();
  @ContentChildren(Tab) tabs;

  ngAfterContentInit() {
    const tabs = this.tabs.toArray();
    const actives = this.tabs.filter(t => {
      return t.active
    });

    if (actives.length > 1) {
      console.error(`Multiple active tabs set 'active'`);
    } else if (!actives.length && tabs.length) {
      tabs[0].active = true;
    }
  }

  tabClicked(tab) {
    const tabs = this.tabs.toArray();

    tabs.forEach(tab => tab.active = false);
    tab.active = true;

    this.onSelect.emit(tab);
  }

}

export const TAB_COMPONENTS = [
  Tabset,
  Tab
];

Answer 1

编辑: 答案最终与我认为的您的问题不相似。对不起。

-- 如果你使用 angular 4 --

可以看到类似的issue that I have reported .

有一个 hack 可以让它工作:

[routerLinkActive]="['']" [ngClass]="rla.isActive?'active':''" #rla="routerLinkActive"