Angular2 小贴士 Name

Angular2 正式版已经发布了一个月了,我也是通过各种方式在进行验证是否可以满足我们的需求,今天我就发现了一个问题。现在我们来一起说明一下,这个可能不算是bug,而应该需要我们记住就可以了。

我们现在需要对标题赋值,动态改变标题。不废话,直接上代码。

App.module.ts 代码

 import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import{InputTextModule}from 'primeng/primeng';
import{FormsModule}from '@angular/forms'; enableProdMode()
@NgModule({
imports: [BrowserModule,InputTextModule,FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [Title]
})
export class AppModule { }

app.component.ts 代码

 import { Component, OnInit, enableProdMode } from '@angular/core';
import { Title } from '@angular/platform-browser'; @Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: "./app.component.html"
}) export class AppComponent {
name: string;
constructor(private title: Title) { }
myClick() {
console.log("guozhqi" + name);
this.title.setTitle(name);
} }

app.component.html

    <input type="text" [(ngModel)]="name">
<button (click)="myClick()">{{name}}</button>
{{name}}

运行效果图:

Angular2  小贴士 Name

问题来了,我们的标题目前是一堆和xml类型的标签,我输入的内容不见了?

我们把app.component.ts 代码改变一下,

 import { Component, OnInit, enableProdMode } from '@angular/core';
import { Title } from '@angular/platform-browser'; @Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: "./app.component.html"
}) export class AppComponent {
name: string;
constructor(private title: Title) { }
myClick() {
console.log("guozhqi" +this. name);
this.title.setTitle(this.name);
} }

请对比区别,我们输出的内容Name加上了this.name ,这样就可以正确的获取到结果。

总结:

  1. 任何时候在方法中使用变量,都要加上this
  2. app.component.ts中的变量name,如果不加this指定,获取的是什么值呢?期待你得回答
  3. 写入标题使用依赖注入Title的setTitle方法

小贴士:Name需要我们注意,this记得要加上

上一篇:qt之窗口换肤(一个qss的坑:当类属性发现变化时需要重置qss,使用rcc资源文件)


下一篇:Eclipse中JSP页面默认编码修改