从js中删除html然后放入单独的文件

Question

更新

whats happening here is when I click a link popup opens and in that I see all this html....smile method is called when I click the link and we are appending html in that method so that we can see it when I open the popup...right now I moved it to separate file something.component.html but when I click the link I am not able to see the popup...since we removed append method...can you update the code in mycodebase...I tried but not sure how to achieve it

• 我正在尝试学习 angular js
• 我得到了基本的功能。
• 但在我的打字稿文件中，我附加了 html。
• 有什么方法可以删除 html 内容并将其放入单独的 html 文件中
• 以及如何将 html 内容重新包含到我的 ts 中。
• 在这部分代码template: "<div id=\\"sportsTable\\"></div>"
• 基本上我试图从追加方法`$("#sportsTable").append(
• 在下面提供我的代码。

/**
 * Animalsrun.ts file
 */
import {
  Component,
  OnInit,
  EventEmitter,
  ViewChild,
  Input,
  Output
}
from "@angular/core";
import {
  bikeService
}
from "../../services/fish.service";
import {
  KendoGridComponent
}
from "../grid/grid.component";
import {
  height
}
from "../shared/progress/progress-circle";

declare let $: any;

let lightWire = null;

@Component({
  selector: "Animalsrun",
  template: "<div id=\"sportsTable\"></div>"
})

export class Animalsrun implements OnInit {



  @Input() public kendoCommandObj: any;
  @ViewChild(height) public progress: height;

  private futureAirings = [];
  private pastAirings = [];
  public fishService: bikeService;

  constructor(fishService1: bikeService) {
    this.fishService = fishService1;
  }

  private kendocommand = {
    edit: {
      createAt: "bottom"
    },
    group: false,
    reorder: true,
    disableFreeze: true,
    resize: true,
    sort: true,
    autoBind: true,
    filter: false,
    pager: {
      messages: {
        // display: "Showing {0} to {1} of {2} entries"
      }
    },
    model: {},
    columns: [],
    pagesize: 50,
    getComponentUrl: "tiger",
    searchFields: [],
    mandatoryFields: [],
    saveStatus: false
  };

  @Output() public applyAPTInfo: EventEmitter < any > = new EventEmitter < any > ();
  @Output("scoresCount") public getBoyEvent = new EventEmitter < number > ();

  public ngOnInit() {
    this.scoresType = "Contract";
    let attributes = this.fishService.getSeesionStorageValue();
    if (attributes) {
      this.userId = attributes.user_attributes.SSO[0];
    }

    let navHeaderHeight = $(".navHeaderBox").outerHeight();
    $(".breadCrumbBox").css("top:" + navHeaderHeight + "px");

    this.kendocommand.model = {
      id: "scoresId",
      fields: {
        contextRow: {
          editable: false,
          filterable: true
        },
        scoresId: {
          editable: true,
          filterable: false,
          sortable: false
        },
        scoresName: {
          editable: false,
          nullable: true
        },
        scoresType: {
          editable: true,
          nullable: true
        },
        scoresData: {
          editable: false,
          nullable: true
        },
        notes: {
          editable: false,
          nullable: true
        },
        elfDocID: {

        },
        url: {
          editable: false,
          nullable: true
        },
        date: {
          editable: false,
          nullable: true
        },
        addedByName: {
          editable: false,
          nullable: true
        },
        userID: {
          editable: false,
          nullable: true
        },
        operationType: {
          editable: true,
          filterable: false,
          sortable: false
        }
      }
    };

  }

  @ViewChild(KendoGridComponent) public gridkendo: KendoGridComponent;



  public smile(ball, source: string): void {
    $("#sportsTable").append(`
        <div class="nail"><div class="record-arrow-left"></div><div class="nail-label">Delete Boy</div></div>
        <div id="AnimalsrunPopup" class="baby">
          <div id="popup-loading"></div>
          <div class="row shirtHeader"><div class="shirtHeaderTitleBox">  <h4 class="kPopUpTitle">VIEW AIRINGS</h4>    </div><div class="shirtHeaderActionsBox">    <a id="forcloseBtn" class="commonLink triggerKPopUpClick" (click)=close()>CLOSE</a></div>
          </div><div class="clearFloat"></div>
          <div class="" style="` + (source === "contract" ? "display:none" : "display:inherit") + `">
            <div  class="subTabsBox popupSubTab"  id="cat"><div class="row subTabsContainer listSliderContainer">  <div class="scroller scroller-left inactive">      <i class="hand hand-chevron-left"></i>  </div>  <div class="scroller scroller-right inactive">        <i class="hand hand-chevron-right"></i>  </div>  <div class="subTabwrapper listSliderWrapper">    <ul class="nav nav-tabs list sliderList" id="subTabNav">    <li class="active" data-tab="snake-tab"><a>snake</a></li>    <li data-tab="contract-tab"><a>contract</a></li>    </ul>  </div></div></div>
          </div>
          <div class="manage-tiger-tabs-container">                          
            <div id="snake-tab" class="manage-tiger-tabs-content active"><div class="row">  <div class="compBoxGrid financeDocComp">      <div class="pull-left">        <div>            <label class="fileContainer marginBottom0Imp"><div class="dragDropIcon displayInlineBlock marginTop5px"></div><span class="waveUploadInfoText">Drop tiger here to upload (Maximum scores size: 5MB)</span><input type="file" id="fire" [class.disabled]="isContractLocked" (change)="changeListener($event)" />            </label>        </div>      </div>      <div class="pull-right">        <label class="commonLink cursorPointer lineHeightInputs" (click)="browseButtonAdd()" id="forAttachBoyBrowseBtn" >        ADD NEW        </label>      </div><div class="clearFloat"></div>
                </div><div class="addELFBoyForm"><div class="baby kendoWindow kPopupConfirmationBox">  <div class="row shirtGridCollection shirtContent lineHeightInputs">    <div class="kendoContent">Do you want to upload the selected scores to contract.</div>  </div><div class="clearFloat"></div>    <div class="row shirtFooter textAligncenterImp">    <button class="commonBtn" type="button" id ="waveBoyOk" (click)="uploadFile($event,scores.value)">OK</button>    <button class="clearBtn" type="button" id ="waveBoyCancel" (click)="cancel()">Cancel</button>  </div><div class="clearFloat"></div></div></div><div class="deletePhotoShop" id="divdeletePhotoShop"><div class="baby kendoWindow kPopupConfirmationBox">  <div class="row shirtGridCollection shirtContent lineHeightInputs">    <div class="kendoContent">Selected scores will be deleted from contract permanently.</div>  </div><div class="clearFloat"></div>    <div class="row shirtFooter textAligncenterImp">  <button class="commonBtn" type="button" id ="deleteBoyYes" (click)="recordDelete(ball)">Delete</button>  <button class="clearBtn" type="button" id ="deleteBoyNo" >Cancel</button>  </div><div class="clearFloat"></div></div></div><div class="sizePhotoShop" id="divsizePhotoShop"><div class="baby kendoWindow kPopupConfirmationBox">  <div class="row shirtGridCollection shirtContent lineHeightInputs">    <div class="kendoContent">The scores size exceeds the max limit of 5 MB</div>  </div><div class="clearFloat"></div>    <div class="row shirtFooter textAligncenterImp">    <button class="clearBtn" type="button" id ="sizeBoyYes" (click)="recordSize()">CANCEL</button>  </div><div class="clearFloat"></div></div></div>
                <div class="col-sm-12 popUpKGrid pad0Imp"><div id="waveBoysGrid" class="` + (source === "contract" ? "contractPopupkGrid" : "snakePopupkGrid") + `"></div></div>
              </div>
            </div>
            <div class="" style=\"+(source === \"contract\" ? \"display:none\" : \"display:inherit\")+\">
              <div id="contract-tab" class="manage-tiger-tabs-content"><div class="col-sm-12 popUpKGrid pad0Imp"> <div class="padTop10px" id="waveTitleGrid"></div></div></div>
            </div>
          </div><!-- container -->
          <div class="clearFloat"></div>
          <div id="contextMenuItems"><ul class= "kendu-custom-contextmenu" id="context-menuWindows">    <li id="delWin">Delete Windows</li></ul>
          </div>
        </div>`);
    let that = this;
    $("#cat .sliderList li").click(function() {
      let tab_id = $(this).attr("data-tab");
      $("#cat .sliderList li").removeClass("active");
      $(".manage-tiger-tabs-content").removeClass("active");
      $(this).addClass("active");
      $("#" + tab_id).addClass("active");
    });
    $("#cat .hand-chevron-left").click(function() {
      $("#cat .sliderList li").eq(0).trigger("click");
      $("#cat .hand-chevron-left").addClass("inactive");
      $("#cat .hand-chevron-right").removeClass("inactive");
    });
    $("#cat .hand-chevron-right").click(function() {
      $("#cat .sliderList li").eq(1).trigger("click");
      $("#cat .hand-chevron-left").removeClass("inactive");
      $("#cat .hand-chevron-right").addClass("inactive");
    });
    $("#fire").unbind().change(function(e) {
      that.changeListener(e);
    });
    $("#fire2").unbind().change(function(e) {
      that.changeListener(e);
    });
    $("#forAttachBoyBrowseBtn").unbind().click(function(e) {
      that.browseButtonAdd();
    });
    $("#waveBoyCancel").unbind().click(function() {
      that.cancel();
    });
    $("#waveBoyOk").unbind().click(function(evt, dropValue) {
      that.uploadFile(evt, dropValue, ball);
    });
    $("#waveBoySave").unbind().click(function(evt, dropValue) {
      that.uploadFile(evt, dropValue, ball);
    });
    $("#forcloseBtn").unbind().click(function() {
      that.close();
    });
    $("#deleteBoyYes").unbind().click(function() {
      that.recordDelete(ball);
    });
    $("#sizeBoyYes").unbind().click(function() {
      that.recordSize();
    });
    that.ContractInfoPopUpWindow = $("#AnimalsrunPopup");
    this.fileName = ball.excelFileName;
    that._dataSource = new kendo.data.DataSource({
      pageSize: 10
    });
    that.options = {
      excel: {
        fileName: "",
        allPages: true
      },
      dataSource: that._dataSource,
      selectable: "row",
      sortable: true,
      reorderable: true,
      resizable: true,
      editable: false,
      contextMenuId: "context-menuWindows",
      autoBind: false,
      pageable: {
        messages: {
          display: "Showing {0} to {1} of {2} entries"
        }
      },
      model: this.kendocommand.model,
      columns: ball.columns,
      dataBound: function(e) {
        setTimeout(function() {}, 5000);
        $(".triggerBoyScroll").trigger("click");
        if (e.sender.dataSource.view().length === 0) {
          let container = e.sender.wrapper.children(".k-grid-content");
          let scrollOffset = {
            left: 0,
            top: 0
          };
          container.scrollLeft(scrollOffset.left);
        }
        $("#waveBoysGrid .contextMenuRow").bind("click", function(e) {
          $(".nail").blur(function() {
            $(this).hide();
            lightWire = null;
          });
          $(".nail").click(function() {
            $(this).hide();
            let lightWire = $(this).parent().parent();
            if (lightWire != null) {
              // let recordToDelete = lightWire;
              $(".deletePhotoShop").show();
              $(".nail").hide();
              $(scores).on("click", "#deleteBoyNo", function() {
                $(".deletePhotoShop").hide();
              });
            }
          });
          let record_x = e.pageX;
          let record_y = e.pageY - $(".navHeaderBox").height() - $(".breadCrumbBox").height() - 20;
          $(".nail").css({
            left: record_x,
            top: record_y
          });
          $(".nail").fadeIn(200);
          $(".nail").show();
          $(".nail").attr("tabindex", -1).focus();
        });
        $("#unlockNo").click(function() {
          $("#unLockWindow").data("kendoWindow").close();
        });
      }
    };

    if (ball.snake === "SCORES") {
      let that = this;
      this.futureAirings = [];
      this.pastAirings = [];
      this.fishService.getResponse(ball.url, "get", null)
        .subscribe(data => {
            this.gridData = data.scoresDtos;
            that._dataSource.data(this.gridData);
          },
          err => {}
        );
    }

    that.window = $("#AnimalsrunPopup");
    that.window.kendoWindow({
      width: "60%",
      snake: false,
      visible: false,
      resizable: false,
      actions: [],
      draggable: false,
      modal: true,
      open: function() {
        $("html, body").css("overflow", "hidden");
        that.isVisible = true;
        $(".kPopUpTitle").text(ball.snake);
        that._grid = $("#waveBoysGrid").kendoGrid(that.options);
        that._grid2 = $("#waveTitleGrid").kendoGrid(that.options);
        that.setscroll("waveBoysGrid");
      },
      deactivate: function() {
        this.destroy();
      },
      close: function(e) {
        $("html, body").css("overflow", "");
      }
    });
    $("#AnimalsrunPopup").prev().find(".k-window-snake").text(ball.snake);
    that.window.data("kendoWindow").center();
    that.window.data("kendoWindow").open();
  }



}

Answer 1

在与您的组件相同的目录中，您需要定义一个与您的*ts文件同名的*.html文件。 例如Animalsrun.html 。 然后将template更改为templateUrl并提供 html 文件的路径。 如果您使用ng gc component_name创建了组件，那么这应该已经为您完成了。

@Component({
    selector: 'my_selector',
    templateUrl: './something.component.html',
    styleUrls: ['./something.component.scss']
})

然后你可以在something.component.html文件中编写你的 html 并且它会运行。