Question

在这里，我正在尝试单独创建tab.component.ts并在parent.component.ts中保留id =“tab-1”...的内容。但是，得到错误

1）无法读取未定义的属性“nativeElement”

在这里，我引用了plunker中的代码：http://plnkr.co/edit/wflXtbu8d7vvU4puH8hc?p=preview并进行了修改，因为我创建了一个单独的tab.component.ts。

请帮助找到解决方案？在这里，是我的傻瓜：http://plnkr.co/edit/bdf9VROBedE5ph0l6qlj?p=preview

  parent.component.ts
     ---------------------
@Component({
------------
})
     import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';

        export class parentComponent implements AfterViewInit {
  name: string;
  tabsdata = ['a', 'b', 'c', 'd'];
  @ViewChild('child') child: TabComponent;

  constructor() {
    this.name = 'simple tabs';
  }

  ngAfterViewInit() {
    this.child.activeTab('tab-1');
  }
}
        parent.component.html
        ------------------------
<div class="col-xs-12 rmpm">
    <div class="tabs tabsMenu" #tabs>

        <app-tab [tabsdata]='tabsdata'></app-tab>

        <div id="tab-1" class="tab-content" role="tabpanel">
            1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div id="tab-2" class="tab-content" role="tabpanel">
            2 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div id="tab-3" class="tab-content" role="tabpanel">
            3 Ut enim ad minim veniam, quis nostrud execitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </div>
        <div id="tab-4" class="tab-content" role="tabpanel">
            4 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
    </div>
</div>

        tab.component.html
        ------------------------
     <ul class=" nav nav-tabs " role="tablist">
    <li class="tab-link" *ngFor="let tab of tabsdata;let i = index;" [ngStyle]="{'width': 'calc(100% /' + tabsdata.length + ')'}">
        <a (click)="tabsUL($event)" href="#tab-{{i+1}}" role="tab">{{tab}}</a>
    </li>
</ul>
        tab.component.ts
        ------------------------
import { Component, OnInit, Input, AfterViewInit, ViewChild, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-tab',
  templateUrl: './tab.component.html',
  styleUrls: ['./tab.component.css']
})
export class TabComponent implements AfterViewInit {
  name: string;
  id = 'tab-1';
  @Input() tabsdata: any;
  @ViewChild('tabs') private tabs;

  constructor() {
    this.name = 'simple tabs';
  }

  ngAfterViewInit() {
    this.activeTab('tab-1');
  }

  tabsUL(event): void {
    const tab_id = event.target.hash.replace('#', '');
    this.activeTab(tab_id);
    event.preventDefault();
  }

  activeTab(id) {
    const tabsEl = this.tabs.nativeElement;
    this.removeActive(tabsEl.querySelectorAll('.active'));
    this.setActive([
      tabsEl.querySelector(`#${id}`),
      tabsEl.querySelector(`[href="#${id}"]`).parentNode
    ]);

  }

  setActive(elems) {
    elems.forEach((el) => {
      el.className += ' active';
    });
  }

  removeActive(elems) {
    elems.forEach((el) => {
      el.className = el.className.replace(' active', '');
    });
  }
}

Answer 1

有些事情看起来不对，

@ViewChild('tabs') private tabs;

ViewChild装饰器参数应该是模板中的组件名称或id。在plunker中，有

<div class="tabs" #tabs>

这就是它在那里工作的原因。

此外，tab.component.ts存在基本错误，例如不使用@Component。

你引用错误的Plunker了吗？上面没有显示上面的代码。

使用angular4中的锚标记'href'从子组件查看父组件中的内容？

1 个答案: