在 Angular 项目中重复使用 html 模板

Question

我有这个 html 模板文件，range-details-dialog.tpl.html

<div class="modal-header clearfix text-left">
    <h5>Update Range</h5>
</div>
<div class="modal-body">
    <form name="form" role="form" class="ng-pristine ng-valid" novalidate ng-submit="updateRange()">
        <div class="form-group-attached">
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group form-group-default input-group p-l-10 p-r-10" ng-class="{ 'has-error' : form.$invalid }">
                        <p ng-show="form.rangeDaily.$error.min" class="help-block">Daily range more than £5</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="row">
        <div class="col-sm-8"></div>
        <div class="col-sm-4 m-t-10 sm-m-t-10">
            <button type="button" class="btn btn-primary btn-block m-t-5" 
             ng-disabled="form.$invalid || promise" promise-btn="promise" ng-click="updateRange()">Update</button>
        </div>
    </div>
</div>

那我要另一个文件forced-range-details-dialog.tpl.html 这两个文件可以是一个文件而不是动态填充的占位符。这些是需要替换的地方：

<h5>Update Range</h5> 会变成 <h5>Update Forced Range</h5>
<p ng-show="form.rangeDaily.$error.min" class="help-block">Daily range more than £5</p>

会变成：

<p ng-show="form.forcedRangeDaily.$error.min" class="help-block">Forced Daily range more than £5</p>
ng-disabled="form.$invalid || promise" promise-btn="promise" ng-click="updateRange()">Update</button>

、ng-disabled="form.$invalid || promise" promise-btn="promise" ng-click="updateForcedRange()">Update</button>

有没有办法避免上述两个单独的模板文件？您能否提供一些示例、链接或指示以说明如何实现？

此外，我在答案中看到一个解决方案是在组件内添加一个布尔参数，然后调用它两次。我不确定如何调用该组件。我在下面粘贴了我的组件：

 angular.module('app.investment.rangeDetails')
  .component('pxForcedLimitAmount', {
      templateUrl: '/assets/js/apps/range/range-details-dialog.tpl.html',
      bindings: {
          amount: '<',
          isRequest: '<?',
          requestedAt: '<?',
          @Input() isForced: boolean  //<<----I added this based on answers below
      },
      controller: [function () {
          var ctrl = this;

          ctrl.$onInit = function () {
              ctrl.isRequest = ctrl.isRequest === true || false;
          };
      }],
  });

Answer 1

您可以使用 inputs.Write 接受输入的组件，并在 html 中呈现它。然后在需要的地方用它的选择器调用这个组件

对于事件使用输出

查看文档 https://angular.io/guide/inputs-outputs

Answer 2

似乎只有占位符需要更改，因此您可以使用变量来决定在模板上显示什么占位符。例如：

isForced: boolean;

ngOnInit() {
   this.isForced = true; // decide how you want to toggle this
}

在模板上：

<h5 *ngIf="!isForced">Update Range</h5>
<h5 *ngIf="isForced">Update Forced Range</h5>

和

<p *ngIf="!isForced" ng-show="form.rangeDaily.$error.min" class="help-block">
     Daily range more than £5</p>


<p *ngIf="isForced" ng-show="form.forcedRangeDaily.$error.min" class="help-block">
     Forced Daily range more than £5</p>

您也可以对其他标签执行相同的操作。

根据评论，“确定”isForced 值的一种方法是向组件引入输入属性，即

@Input() isForced: boolean;

并从其他地方调用该组件，例如：

<app-user [isForced]="true"></app-user>

在 Angular 项目中重复使用 html 模板

Reuse html template in Angular project

html

javascript

templates

angularjs

angular-template