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 ,这样就可以正确的获取到结果。

总结：

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

小贴士：Name需要我们注意，this记得要加上

巴特西

Angular2 小贴士 Name

最新文章

热门文章