角度組件進入傳單彈出

無法弄清楚如何生成組件傳遞到傳單彈出。我已經試過兩件事情：角度組件進入傳單彈出

首先，組件選擇融入HTML，但它看起來好像角度不編譯：

let my geojson = L.geoJSON(data, { 
     onEachFeature: (feature, layer) => { 
      let popup = L.popup().setContent('<app-component-detail></app-component-detail>'); 
      layer.on({ 
       click:() => { 
        layer.bindPopup(popup); 
       } 
      }) 
     } 
    }).addTo(map);

當我點擊一個點在地圖上，在彈出窗口是空的。

然後我考慮使用「resolveComponentFactory」生成組件到ViewContainerRef。它運作良好，如果我打電話給我的視圖的元素與@ViewChild：

模板：

<div #myContainer></div>

邏輯：

@ViewChild('myContainer', { read: ViewContainerRef }) myContainer: ViewContainerRef; 
private generatedComponent= this.componentFactoryResolver.resolveComponentFactory(componentDetail); 
let my geojson = L.geoJSON(data, { 
    onEachFeature: (feature, layer) => { 
     layer.on({ 
      click:() => { 
       this.myContainer.createComponent(this.generatedComponent); 
      } 
     }) 
    } 
}).addTo(map);

現在我想直接生成我的組件到一個彈出窗口。我想我需要在我的彈出窗口的內容中設置一個ViewContainerRef。類似的東西：

@ViewChild('popup', { read: ViewContainerRef }) popup: ViewContainerRef; 
private generatedComponent= this.componentFactoryResolver.resolveComponentFactory(componentDetail); 
let my geojson = L.geoJSON(data, { 
    onEachFeature: (feature, layer) => { 
     let popup = L.popup().setContent('<div #popup></div>'); 
     layer.on({ 
      click:() => { 
       layer.bindPopup(popup); 
       this.popup.createComponent(this.generatedComponent); 
      } 
     }) 
    } 
}).addTo(map);

編輯：這是我如何換位這個solution到leaflet.js

let geojson = L.geoJSON(data, { 
    style:() => defaultStyle, 
    onEachFeature: (feature, layer) => { 
    let popup = L.popup(); 
    layer.on({ 
     click:() => { 
     this.zone.run(() => { 

      if(this.componentRef){ 
      this.componentRef.destroy(); 
      } 
      const compFactory = this.componentFactoryResolver.resolveComponentFactory(componentDetailmponent); 
      this.componentRef = compFactory.create(this.injector); 

      if (this.appRef['attachView']) { // since 2.3.0 
      this.appRef['attachView'](this.componentRef.hostView); 
      this.componentRef .onDestroy(() => { 
      this.appRef['detachView'](this.componentRef.hostView); 
      }); 
     } else { 
      this.appRef['registerChangeDetector'](this.componentRef.changeDetectorRef); 
      this.componentRef.onDestroy(() => { 
      this.appRef['unregisterChangeDetector'](this.componentRef.changeDetectorRef); 
      }); 
      } 

      let div = document.createElement('div'); 
      div.appendChild(this.componentRef.location.nativeElement); 
      popup.setContent(div); 
     } 
    ) 

     } 
    }); 
    layer.bindPopup(popup); 
    } 
});

來源

2017-02-20 Nico Dv

檢查這個http://stackoverflow.com/questions/40922224/angular2-component-into-dynamicaly-created-element – yurzui

謝謝你的鏈接。我試過將它轉換成傳單，看編輯帖子 –

你有沒有相應的重擊？ – yurzui

這是我如何換位這個solution到leaflet.js：

let geojson = L.geoJSON(data, { 
onEachFeature: (feature, layer) => { 
    let popup = L.popup(); 
    layer.on({ 
    click:() => { 
     this.zone.run(() => { 

     if(this.componentRef){ 
     this.componentRef.destroy(); 
     } 
     const compFactory = this.componentFactoryResolver.resolveComponentFactory(componentDetailmponent); 
     this.componentRef = compFactory.create(this.injector); 

     if (this.appRef['attachView']) { // since 2.3.0 
     this.appRef['attachView'](this.componentRef.hostView); 
     this.componentRef .onDestroy(() => { 
     this.appRef['detachView'](this.componentRef.hostView); 
     }); 
    } else { 
     this.appRef['registerChangeDetector'](this.componentRef.changeDetectorRef); 
     this.componentRef.onDestroy(() => { 
     this.appRef['unregisterChangeDetector'](this.componentRef.changeDetectorRef); 
     }); 
     } 

     let div = document.createElement('div'); 
     div.appendChild(this.componentRef.location.nativeElement); 
     popup.setContent(div); 
    } 
) 

    } 
}); 
layer.bindPopup(popup); 
} 
});

來源

2017-02-20 12:34:29

角度組件進入傳單彈出

回答

相關問題