在 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 这两个文件可以是一个文件，而不是动态填充的占位符。 这些是需要替换的地方：

1. <h5>Update Range</h5> 将变为 <h5>Update Forced Range</h5>

2. <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>

3. 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

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

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>

你也可以对其他标签做同样的事情。

---

在 cmets 中，“确定”isForced 值的一种方法是将输入属性引入组件，即

@Input() isForced: boolean;

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

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

Answer 2

您可以使用输入。编写一个接受输入的组件，并将其呈现为 html。然后用它的选择器在想要的地方调用这个组件

事件使用输出

请参阅文档https://angular.io/guide/inputs-outputs