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

Question

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

1) 无法读取未定义的属性"nativeElement">

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

请帮忙找到解决方案？这是我的plunker：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。

你指错了普朗克吗？上面没有显示任何代码。