html - Angular 模态 : How to reuse the same html in modal as well as in the page

标签 html angular angular2-template

每当用户单击图像时,都会在我的页面中。页面上的任何内容现在都应该显示在模式中。目前我已经在我的 Angular 代码中复制了相同的 html 两次。 有什么方法我们可以在页面中重用相同的 html 以及 Angular 中的模式吗?

最佳答案

您可以使用所需的模板 html 创建一个组件,并在页面和模式中使用它

您还可以使用ng-templateng-container

@Component({
  selector: 'app-root',
  template: `      
<ng-template #estimateTemplate let-lessonsCounter="estimate">
    <div> Approximately {{lessonsCounter}} lessons ...</div>
</ng-template>
<ng-container 
   *ngTemplateOutlet="estimateTemplate;context:ctx">
</ng-container>
`})
export class AppComponent {

    totalEstimate = 10;
    ctx = {estimate: this.totalEstimate};
  
}

*示例取自 here

关于html - Angular 模态 : How to reuse the same html in modal as well as in the page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72284878/

相关文章:

python - 如何构建数据以在 Flask 中轻松构建 HTML 表格

html - 如何使用 colspan 定位属于 <th> 的 <td>?

javascript - Angular 5 服务替换/覆盖

angular - 无法读取 angular2 中 null 的属性 'navigate'

typescript - 使用 angular2 组件(没有 forwardRef)实现递归结构?

javascript - 为什么在 Chrome 中添加跨度会改变字母位置或宽度?

javascript - 基于特定选择选项显示默认过滤器 - AngularJS

angular - 如何禁用内插字符串 Angular 2+

angular - 以字符串形式获取子组件

typescript - Angular 2 : How to know number of iterators on *ngFor