角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处理

回答

相关问题