Angular動態編譯HTML模版

2022-04-04 01:27:47 字數 1603 閱讀 5479

問題:需要列印的模版特別多,而且各不相同,可能需要經常改動,如果在前端進行單獨建立元件的方式每次新增模版修改模版都要重新發布版本。

解決方式:通過把模版html儲存到資料庫的方式,根據呼叫列印的傳參獲取不同的列印模版

oracle中nvarchar最多存4000個字元數量     nclob最大儲存大小為4gb

通過[innerhtml],只能渲染模版中的html語法和樣式,模版中的angular模版無法這些無法進行解析。這種方式只能渲染文字內容

通過componentfactoryresolver,這個物件可以接受乙個元件型別建立乙個元件例項。這種方式元件在前端需要存在

通過下面這種方式來動態編譯html模版

import  from

"@angular/core";

import

from

"@angular/common";

import

from

"@angular/router";

import

from

"./hello.component";

@component()

export

class

dynamictemplatecomponent ) vc: viewcontainerref;

private cmpref: componentref;

constructor(

private

compiler: compiler,

private

injector: injector,

private moduleref: ngmoduleref,

) {}

ngafterviewinit() }

"getx() === 'x'

">use *ngif: }

`); }

private createcomponentfromraw(template: string

) ;

//需要給當前建立的模版傳遞的方法

this.getx = () => 'x'

; }

const tmpcmp = component()(new

tmpcmpconstructor().constructor);

//now, also create a dynamic module.

const tmpmodule =ngmodule()(class

{});

//now compile this module and component, and inject it into that #vc in your current component template.

this

.compiler.compilemoduleandallcomponentsasync(tmpmodule)

.then((factories) =>);

} //cleanup properly. you can add more cleanup-related stuff here.

ngondestroy()

}}

資料

html靜態頁面轉angular動態頁面

1.先建立乙個靜態html頁面模板,然後把這個靜態html頁面模板轉換成能動態顯示的angularjs模板。2.對於angularjs應用,我們鼓勵使用模型 檢視 控制器 mvc 模式解耦 和分離關注點 1 在angularjs中,乙個檢視是模型通過html模板渲染之後的對映。2 這裡我們使用ngr...

Angular動態載入元件

有時候需要根據url來渲染不同元件,我所指的是在同乙個url位址中根據引數的變化顯示不同的元件 這是利用angular動態載入元件完成的,同時也會設法讓這部分動態元件也支援aot。下面以乙個step元件為示例,完成乙個3個步驟的示例展示,並且可以通過urluser?step step one的變化顯...

angular 動態元件型別

出處 元件型別1 純函式功能,而沒有檢視部分,即factory 類似於 http 元件型別2 不是常駐於檢視,而是動態插入的 有ui的一類元件,有輸入互動 不常被呼叫 類似於model對話方塊 元件型別3 不常駐於檢視,但會被經常呼叫,而且是動態插入的 無輸入互動 有ui的一類元件 類似於popov...