Angular2 小贴士 Name

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

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

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

App.module.ts 代码

 1 import { NgModule, enableProdMode } from '@angular/core';
 2 import { BrowserModule, Title } from '@angular/platform-browser';
 3 import { AppComponent } from './app.component';
 4 import{InputTextModule}from 'primeng/primeng';
 5 import{FormsModule}from '@angular/forms';
 6 
 7 enableProdMode()
 8 @NgModule({
 9     imports: [BrowserModule,InputTextModule,FormsModule],
10     declarations: [AppComponent],
11     bootstrap: [AppComponent],
12     providers: [Title]
13 })
14 export class AppModule {
15 
16 }

 

app.component.ts 代码

 1 import { Component, OnInit, enableProdMode } from '@angular/core';
 2 import { Title } from '@angular/platform-browser';
 3 
 4 @Component({
 5     moduleId: module.id,
 6     selector: 'my-app',
 7     templateUrl: "./app.component.html"
 8 })
 9 
10 export class AppComponent  {
11     name: string;
12     constructor(private title: Title) { }
13     myClick() {
14         console.log("guozhqi" + name);
15         this.title.setTitle(name);
16     }
17    
18 }

app.component.html

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

 

运行效果图:

 

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

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

 1 import { Component, OnInit, enableProdMode } from '@angular/core';
 2 import { Title } from '@angular/platform-browser';
 3 
 4 @Component({
 5     moduleId: module.id,
 6     selector: 'my-app',
 7     templateUrl: "./app.component.html"
 8 })
 9 
10 export class AppComponent  {
11     name: string;
12     constructor(private title: Title) { }
13     myClick() {
14         console.log("guozhqi" +this. name);
15         this.title.setTitle(this.name);
16     }
17    
18 }

 

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

总结:

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

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

 

我又回来了,回到了技术最前线,
相关文章
|
Java
Angular最新教程-第四节详细说明初始化项目
Angular最新教程-第四节详细说明初始化项目
271 0
Angular最新教程-第四节详细说明初始化项目
|
JSON Linux 数据格式
Angular 2.x折腾记 :(5) 动手实现一个自定义管道
管道这东西,可以让用户的体验变得好,也可以省去我们一些重复性的工作; 官方的内置管道就不解释了,自行看文档吧
134 0
[Angular 依赖注入详谈] Angular Module Providers几种类型的实现源代码具体位置
[Angular 依赖注入详谈] Angular Module Providers几种类型的实现源代码具体位置
113 0
[Angular 依赖注入详谈] Angular Module Providers几种类型的实现源代码具体位置
|
JavaScript 前端开发 数据安全/隐私保护
|
JavaScript 前端开发 容器
|
JavaScript 前端开发 PHP
AngularJS 提交表单的方式 【已翻译100%】(1/2)
在AngularJS出现之前,很多开发者就面对了表单提交这一问题。由于提交表单的方式繁杂而不同,很容易令人疯掉……然而现在看来,依然会让人疯掉。 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交。
1565 0