将离子标签从 ts 文件附加到 html

Posted 2023-03-13

【中文标题】将离子标签从 ts 文件附加到 html

【英文标题】：Append Ionic Tags from ts file to html

【发布时间】：2019-01-15 22:34:12

【问题描述】：

我正在尝试在我的 ionic 应用程序中的 html 文件上添加一个 div。我已经使用.innerHTML 创建了新的 div 并将其附加到 HTML 文件中的主 div，但没有应用离子标签。

我的 html 文件

 <div class="vehicle-profile" id="vehicle-profile" style="padding-bottom: 10px;">
    <div class="upload">
        <ion-grid>
          <ion-row>
            <ion-col col-2>
              <div class="upload-small" (tap)="scanBarcode(i)">
                <img src="assets/icon/barcode.png" >
                <p style="margin: 0"> SCAN</p>
              </div>
            </ion-col>
            <ion-col offset-1 col-9>
              <input type="text" class="formfield" placeholder="VIN #" [(ngModel)]="vin[i]"  name="vin_number[i]" (ngModelChange)="getVehicleInfo($event, i)">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Year" [(ngModel)]="year[i]" name="year[i]">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Make"  [(ngModel)]="make[i]"  name="make[i]">
            </ion-col>
            <ion-col col-12>
                <input type="text" class="formfield" placeholder="Model" [(ngModel)]="model[i]"  name="model[i]">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Plate #" [(ngModel)]="plate_num[i]" name="plat_number[i]">
            </ion-col>
            <ion-col col-6>
                <input type="text" class="formfield" placeholder="Mileage" [(ngModel)]="mileage[i]" name="mileage[i]">
            </ion-col>
            <ion-col offset-4 col-4>
                <div class="delete-btn" >
                    <button type="button" ion-button block large (click)="removeVehicleBox(i)">
                      <p class="i">
                          Delete Profile
                      </p>
                    </button>
                  </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
</div>

当我从 .ts 文件中附加相同内容时，它不会显示 css 效果。

TS 文件

 addVehicleBox()
    this.num = this.num+1;
    var content = document.createElement('div');      
    content.innerHTML = this.uploadBoxForm(this.num);
    document.getElementById('vehicle-profile').appendChild(content);
  

  removeVehicleBox(selectedBox)
    console.log(selectedBox)
  

  uploadBoxForm(i)
    let data = `
    <div class="upload">
    <ion-grid>
      <ion-row>
        <ion-col col-2>
          <div class="upload-small" (tap)="scanBarcode(`+i+`)">
            <img src="assets/icon/barcode.png" >
            <p style="margin: 0"> SCAN</p>
          </div>
        </ion-col>
        <ion-col offset-1 col-9>
          <input type="text" class="formfield" placeholder="VIN #" [(ngModel)]="vin[`+i+`]"  name="vin_number[`+i+`]" (ngModelChange)="getVehicleInfo($event, i)">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Year" [(ngModel)]="year[`+i+`]" name="year[`+i+`]">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Make"  [(ngModel)]="make[`+i+`]"  name="make[`+i+`]">
        </ion-col>
        <ion-col col-12>
            <input type="text" class="formfield" placeholder="Model" [(ngModel)]="model[`+i+`]"  name="model[`+i+`]">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Plate #" [(ngModel)]="plate_num[`+i+`]" name="plat_number[`+i+`]">
        </ion-col>
        <ion-col col-6>
            <input type="text" class="formfield" placeholder="Mileage" [(ngModel)]="mileage[`+i+`]" name="mileage[`+i+`]">
        </ion-col>
        <ion-col offset-4 col-4>
            <div class="delete-btn" >
                <button type="button" ion-button block large (click)="removeVehicleBox(`+i+`)">
                  <p class="i">
                      Delete Profile
                  </p>
                </button>
              </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
    `
    return data;
  

在这里，我附上了图片，展示了在 ts 文件的内部 html 中使用离子标签的效果。 1 是写在 html 文件中的离子标签，2 是 ts 文件中附加的离子标签。 .

无论如何我可以渲染离子标签吗？

【问题讨论】：

您不能像您尝试的那样动态地使用非标准 Web 组件。这不适用于离子和角度等组件，因为它们需要“引导”等。您可以使用标准组件来做到这一点，然后“设计”它们看起来像离子。如果您真的想实现您在这里所拥有的，请考虑利用 Ionic 的 Segment 等方法。

所以你的意思是我必须制作一个组件并调用它们？

是的，所以基本上当你有一个包含所有 Angular/ionic 特定标记的组件时——这不是你的浏览器最终会出现的内容，对吧？ Angular 会将所有这些爵士乐引导/解释为具有大量样式等的相关标准 Web 元素。因此，理想情况下，您应该为您拥有的详细表单创建一个普通组件。其实有办法做动态组件：angular.io/guide/dynamic-formangular.io/guide/dynamic-component-loader

但根据您的需要，我认为您可以通过使用 ngSwitches 到相关所需模板的 Segment ionicframework.com/docs/api/components/segment/Segment 来逃避

我认为不能使用分段。我需要添加带有表单的框或动态删除它们。我还需要保存所有表单值。那么组件会为此工作吗？

【参考方案1】：

您确定要添加 css 类和代码吗？ 我看到你的第二个例子没有

"style="padding-bottom: 10px;"

可能是您的

中缺少 css 样式

var content = document.createElement('div');  

?

【讨论】：

样式适用于父 div，我将子元素附加到该 div。正如你在图片中看到的，我已经应用了 CSS 及其工作，它只是 ionic 默认样式没有被使用