Javascript 无法读取angular2中模板函数中的回调函数

我正在尝试在模板函数中显示动态html，但无法执行此操作：

@Component({
  selector: 'hero-host',
  template: getHTML(),
  styles: ['.active {background-color: yellow;}']
})
export class HeroHostComponent {
getHTML(){
return '<ul class="page-sidebar-menu"><li class="sidebar-toggler-wrapper hide"><div class="sidebar-toggler"> </div></li><li class="sidebar-search-wrapper"></li><li class="nav-item start"><a class="nav-link home name" (click)="HomeButton(event)"><i class="fa fa-home"></i><span class="title">Home</span></a></li><li class="nav-item"><a class="nav-link nav-toggle masters" (click)="parentNav($event)"><i class="fa fa-diamond"></i><span class="title">Master Files</span><span class="arrow"></span><span class=""></span></a><ul class="sub-menu"><a class="nav-link nav-toggle masters" (click)="parentNav($event)"></a>';   
}
}

@组件({
选择器：“英雄主机”，
模板：getHTML（），
样式：['.active{背景色：黄色；}']
})
导出类组件{
getHTML（）{
返回“
主文件
”；
}
}

如果我做错了，请帮助我。 提前感谢。

用此方法返回的字符串替换

getHTML（）

call（

template

key-in

Component

decorator）

根据文件：

template-视图的内联定义模板

---

@组件（{selector:'hero host'，template:'

• 主文件；样式：['.active{background color:yellow；}}}}）我知道，我需要添加动态html模板功能。有办法吗？