jQuery的追加（），前置（），HTML（）等效於角2

我創建的元素如下：jQuery的追加（），前置（），HTML（）等效於角2

let tmplt=``; 
     for(let i=0;i<wht.length;i++){ 
     tmplt +=`<li title="${wht[i]}" style="color:#000"> 
      <span (click)="slctRmv($event)">×</span>${wht[i]} 
      </li>`; 
     } 
     jQuery("#myId").prepend(tmplt);

它附加到MYID但點擊事件沒有觸發作爲模板。

所以在angular2中有這個解決方案。

來源

2016-04-13 Akhilesh Kumar

這是什麼'let'語法？ – madalinivascu

@madalinivascu ES6語法 – BeNdErR

Angular2中應避免直接DOM操作。

你可以得到一個參考到錨定元件等

@Component({ 
    selector: '...', 
    template: `<div><span #myAnchor></span></div>`}) 
class MyComponent { 
    @ViewChildren('myAnchor') myAnchor; 

    constuctor(private renderer:Renderer) {} 

    ngAfterViewInit() { 
    // this.myAnchor.nativeElement.appendChild(); 
    this.renderer.invokeElementMethod(this.myAnchor, 'appendChild', []); 
    } 
}

或其它方法的HTML元素提供見[Node.appendChild（）]（https://developer.mozilla.org/de/docs/Web/API/Node/appendChild

但更喜歡方法Renderer提供。

您也可以使用

<div><span [innerHTML]="someField"></div>

與

class MyComponent { 
    someField:string = '<div>xxx</div>'; 
}

來源

2016-04-13 11:40:32

#myId是動態創建的，所以在我的視圖中最初沒有#myId –

'（click）=「slctRmv（$ event）」'或任何其他類型的Angular綁定語法在動態添加中不起作用HTML。組件或指令也沒有實例化。您可能需要[DynamicComponentLoader]（https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html） –

是的，我也懷疑如此，但是如何在我的場景中使用它？ –

可以包括jQuery的的喜歡，但如果你的目的是要改變的東西在視圖中它不是建議。

你也可以建立一個lite版本https://www.npmjs.com/package/jquery-lite。

一個真正的用例可能是一個外部庫返回一些html，你需要在內部對返回的html做一些DOM操作並將它發送到另一個服務。爲此寫了香草JS可能相當耗時。

來源

2016-11-25 15:25:11

jQuery的追加（），前置（），HTML（）等效於角2

回答

相關問題