如何使用innerHTML來渲染角變量 - Angular2

在我的應用程序他們是從已宣告這樣一個恆定的文件來一些文字：如何使用innerHTML來渲染角變量 - Angular2

export const EmpStrings = { 
    data: "Welcome {{employee.name}}" 
    }

，在我的組件文件有一個名爲employee對象。

public employee = { name: 'xyz', dept: 'EE' }

現在在我的HTML我想用這樣的：

<div class='e-data' [innerHTML] = "EmpStrings.data"></div>

但這並不似乎是工作。我嘗試了各種變化：

[inner-html] = "EmpStrings.data" 
[innerHTML] = {{EmpStrings.data}} 
[innerHTML] = "{{EmpStrings.data}}"

但他們都不似乎是工作。

來源

2017-07-21 Dalvik

@Vega是的，我已經嘗試過所有上市有可能的方式。 – Dalvik

如果要在字符串中進行綁定，則需要使用'JitCompiler'。例如https://stackoverflow.com/questions/39410355/how-to-use-variable-to-define-templateurl-in-angular2或https：// stackoverflow。com/questions/40060498/angular-2-1-0 -create-child-component-on-the-fly-dynamic/40080290＃40080290 – yurzui

如果你不想使用JIT編譯器，那麼你可以解析字符串你自己

component.ts

ngOnInit() { 
    this.html = EmpStrings.data.replace(/{{([^}}]+)?}}/g, ($1, $2) => 
     $2.split('.').reduce((p, c) => p ? p[c] : '', this)); 
}

模板

<div [innerHTML]="html"></div>

Plunker Example

來源

2017-07-21 10:22:36 yurzui

使用${employee.name}綁定角變量的innerHTML

"data": `Welcome ${employee.name}`

來源

2017-07-21 09:39:19

如果我使用'$ {employee.name}'，那麼我收到錯誤消息emloyee未在常量文件中定義 – Dalvik

發佈員工對象 –

使用'this.employee.name' –

角不進行內插字符串這樣的，據我所知的原因之一是安全性。 const沒有你的員工所在的上下文，因此你看到錯誤說員工沒有被定義。

你可以這樣做：

更改您的常數：

export const EmpStrings = {data: "Welcome "};

則：

<div class='e-data'>{{EmpStrings.data}}{{employee.name}}</div>

但是，如果由於某種原因，你必須使用[innerHTML]：

一世在組件視圖

getWelcomeMessage(){return EmpStrings.data + this.employee.name;}
：n您的組件類，添加一個方法

<div class='e-data' [innerHTML] = "getWelcomeMessage()"></div>

來源

2017-07-21 10:06:18 Rex

如何使用innerHTML來渲染角變量 - Angular2

回答

相關問題