Dynamic content compile?


#1

大家好,

請問一個dynamic content compile的問題(也不確定是否為這個類型),
我使用了一個directive “ionic-img-viewer”,它可以方便的預覽圖片並且可以放大縮小,
使用方法為:
<img [src]="image_url" imageViewer >

問題來了,
我有一個頁面是要載入User從Server端輸入的內容(html), 我想要達到的是將User輸入的img tag, 也要自動的套用 imageViewer directive

以下是載入user content的code, post.content是透過restful api從server取回的,

  <!-- post content-->
  <div>
    <span id="post_content" [innerHTML]="post.content"></span>
  </div>
  <!-- post content-->

user輸入的內容可能是

<p>
<div>今天天氣好!</div>
<img src="https://example.com/aaa.png"/>
</p>

想法上是: 從server讀取到資料後, 透過程式將post.content轉換成以下(加上imageViewer directive)

<p>
<div>今天天氣好!</div>
<img src="https://example.com/aaa.png" imageViewer/>
</p>

然後透過compiler讓directive生效,

以上的想法不知道是否正確? 是否可行? 是否有更好的solution?
網路上的做法有些我都看不太懂…
希望各位大大指教一下,謝謝!


#2

恩,基本上你需要用到動態 compiler 的動作,這裡我有寫一個簡單的範例程式,你參考看看


#3

經過測試已經可以work了~
程式碼也容易懂~
感謝Kevin大大的指教!!:grinning:


#4

@Kevin 大大,
我使用AOT compile後, 執行會出現 “Runtime compiler is not loaded” 的錯誤訊息,
Google到這一篇:

我檢查了程式,
編譯後的程式應該是使用AOT啟動的

不知道還有什麼問題? 該如何解決?
感謝您~


#5

動態 compiler 跟 AOT 是互相衝突的. 你只能擇一。

AoT 模式就是在建置時就 compiler 了,所以 compiler 那段程式碼就不會被輸出


#6

了解,
只能抉擇一下了…
Thanks!!