去除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

• 我想學的角度JS
• 我工作的基本功能推杆。
• 但在我的打字稿文件中我附加了html。
• 有沒有什麼方法可以刪除html內容並將其放入單獨的html文件中
• 以及如何將html內容包含回我的ts中。
• 在這部分代碼template: "<div id=\"sportsTable\"></div>"
• 基本上我試圖消除來自追加方法的HTML`$（ 「＃sportsTable」）。追加（
• 提供我下面的代碼。

/** 
* 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

在爲你的組件，你需要定義一個*.html文件具有相同的名稱*ts文件同一目錄下。Animalsrun.html，例如，然後改變template到templateUrl並給出你的html文件的路徑。如果您使用ng g c component_name創建組件，那麼這應該已經爲您完成。

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

然後，你可以寫在something.component.html文件的HTML，它會運行。