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}}

 

運行效果圖：

 

問題來了，我們的標題目前是一堆和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記得要加上