角2修改視圖HTML處理

後我有下面的角2代碼角2修改視圖HTML處理

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: 'Waiting on port ', 
}) 
export class AppComponent { 
}

正如我想動態文本追加「3000」到模板輸出的例子。這怎麼能實現？

因此，最終輸出必須是「等待在端口3000」

編輯：我本來應該更具體一點。我期待着回覆類似響應對象的東西，我可以在發送到「前端」呈現前修改html。所以，Angular 2會處理綁定模板中的所有細節，然後修改html。

來源

2017-02-11 wenn32

我想如果你告訴我們端口號是從 – Matt

來的，會有很大的幫助，端口號就是一個例子。我可以添加任何靜態文本 – wenn32

@Component({ 
    selector: 'app-root', 
    template: 'Waiting on port {{port}}', 
}) 
export class AppComponent { 
    port:number; 
    someMethod() { 
    this.port = 3000; 
    } 
}

來源

2017-02-11 16:49:53

對於混淆抱歉，我已經添加了對該問題的編輯。 – wenn32

綁定**僅**靜態添加到組件的模板時才起作用。如果你想動態添加綁定（來自服務器或類似的響應），你可以動態創建一個組件，就像http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/ 37044960＃37044960 –

簡單的靜態文本呢？ – wenn32

繼Günter Zöchbauer的答案，如果你想的方法來火的時候，組件的初始化，您可以使用ngOnInit爲你的方法，‘被初始化指令的數據綁定屬性之後，被稱爲’（從文檔）。

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: 'Waiting on port {{port}}', 
}) 
export class AppComponent implements OnInit { 
    port:number; 
    ngOnInit(): void { 
    this.port = 3000; 
    }; 
}

OnInit必須包含在您的導入中。

來源

2017-02-11 17:13:16 robstarbuck

如果他無條件地將值設置爲'3000'，他可以使用'port：number = 3000;'或者'template：'等待端口3000'，'。這就是爲什麼我使用'someMethod（）'因爲必須有一些導致值被設置的「事件」，但是這個信息在問題中沒有提供。 –

這是一個很好的觀點，一個事件或一些邏輯來確定端口將是必需的。在我的例子中，'this.port'可能指向一個承諾，例如。 – robstarbuck

對於混淆抱歉，我已經添加了對該問題的編輯。 – wenn32

角2修改視圖HTML處理

回答

相關問題