如何在角度Js html页面中两次使用相同的组件

Question

我创建了一个组件“英雄细节” 这是component.js文件代码

angular.module('myApp.practiceComponent').component('heroDetail',{
templateUrl: 'components/practiceComponent/practiceComponent.html',
bindings: {
    resolve: '<'
}
})

我为名为myApp.practiceComponent的组件创建了一个单独的模块

这是组件模板文件

<h1>Practice Component</h1>
<input type="text" ng-model="nameField">
<h1>Hi {{nameField}} </h1>

现在我以这种方式在一个主要的html文件中使用此组件

<p>This is the partial for view 1.</p>
<hero-detail id="component1"><hero-detail>
<hero-detail id="component2"></hero-detail> 

但是我得到的是模板代码在浏览器中只渲染一次，而不是两次。我已经搜索过模板但没有找到任何解决方案。难道我们只能在单个html中使用组件实例页面，那么创建组件的目的是什么？