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

在这里，我试图分别创建

tab.component.ts

，并保留id=“tab-1”的内容。。。在parent.component.ts中。但是，得到错误

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

在这里，我引用了plunker:中的代码，并在创建单独的tab.component.ts时进行了修改

请帮我找到解决办法？ 这是我的宝物：

parent.component.ts
---------------------
@组成部分({
------------
})
从“@angular/core”导入{Component，OnInit，ViewChild，AfterViewInit}；
导出类parentComponent实现AfterViewInit{
名称：字符串；
tabsdata=['a'，'b'，'c'，'d']；
@ViewChild（'child'）子项：选项卡组件；
构造函数（）{
this.name='简单选项卡'；
}
ngAfterViewInit（）{
this.child.activeTab（'tab-1'）；
}
}
parent.component.html
------------------------


tab.component.ts
------------------------
从“@angular/core”导入{Component，OnInit，Input，AfterViewInit，ViewChild，Output，EventEmitter}；
@组成部分({
选择器：“应用程序选项卡”，
templateUrl:'./tab.component.html'，
样式URL:['./tab.component.css']
})
导出类TabComponent实现AfterViewInit{
名称：字符串；
id=‘表1’；
@Input（）选项卡数据：任意；
@ViewChild（“选项卡”）专用选项卡；
构造函数（）{
this.name='简单选项卡'；
}
ngAfterViewInit（）{
这个.activeTab（'tab-1'）；
}
tabsUL（事件）：无效{
const tab_id=event.target.hash.replace（'#'，''）；
this.activeTab（tab\u id）；
event.preventDefault（）；
}
活动选项卡（id）{
const tabsEl=this.tabs.nativeElement；
this.removeActive（tabsEl.querySelectorAll（'.active'））；
这是setActive([
tabsEl.querySelector（`${id}`），
tabsEl.querySelector（`[href=“#${id}]”`）.parentNode
]);
}
setActive（元素）{
forEach元素（（el）=>{
el.className+=‘活动’；
});
}
removeActive（元素）{
forEach元素（（el）=>{
el.className=el.className.replace（'active'，''）；
});
}
}

有些事情看起来不太对劲

@ViewChild('tabs') private tabs;

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

<div class="tabs" #tabs>

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

此外，tab.component.ts还有一些基本错误，比如不使用@component

---

你提到了错误的普朗克吗？上面没有显示任何代码

更新代码…以上。。。。。。。。。。。。。。。它位于parent.component.htmlHere，这是我的插件：可能错误在tab.component.ts--activeTab（id）{const tabsEl=this.tabs.nativeElement；this.removeActive（tabsEl.queryselectoral（'.active'）；this.setActive（[tabsEl.querySelector（

#${id}

），tabsEl.querySelector（

[href=“\35;${id}]））]

）.parentNode]）；}setActive（elems）{elems.forEach（（el）=>{el.className+='active'；}）；}removeActive（elems）elems.forEach（（el）=>{el.className=el.className.replace（'active'，''；}）；}否，引用plunker是正确的。我所做的只是创建了一个tab.component.ts并将其作为选择器传递到parent.component.ts中。

<div class="tabs" #tabs>