Angular2 小贴士 Name
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 ,这样就可以正确的获取到结果。
总结:
- 任何时候在方法中使用变量,都要加上this
- app.component.ts中的变量name,如果不加this指定,获取的是什么值呢?期待你得回答
- 写入标题使用依赖注入Title的setTitle方法
小贴士:Name需要我们注意,this记得要加上
Angular2 小贴士 Name相关推荐
- 重置linux桌面,Ubuntu 18.04小贴士:重置Gnome桌面与使用隐藏的屏幕录像工具
原标题:Ubuntu 18.04小贴士:重置Gnome桌面与使用隐藏的屏幕录像工具 1.如何在Ubuntu 18.04中重置Gnome桌面 本快速教程将向您展示如何在Ubuntu 18.04 LTS中 ...
- 13个代码注释的小贴士
下面的13条小贴士可以帮助你写出更规范.更容易维护的代码注释. 1.逐层注释 使用统一格式对每一个语句块进行注释,如: 类:简单描述.作者.最后修改时间等 方法:关于该方法的目的.函数.参数.返回值的 ...
- python编程小知识_分享Python开发中要注意的十个小贴士
大家请注意:这篇文中假设我们都用的是Python 3 1. 列表推导式 你有一个list:bag = [1, 2, 3, 4, 5] 现在你想让所有元素翻倍,让它看起来是这个样子:[2, 4, 6, ...
- 【小贴士】虚拟键盘与fixed带给移动端的痛!
前言 今天来公司的主要目的就是研究虚拟键盘与fixed的问题,期间因为同事问起闭包与事件委托(阻止冒泡)相关问题,便穿插了一篇别的: [小贴士]工作中的"闭包"与事件委托的&quo ...
- 掌握这 25 条小贴士,快速提升数据可视化能力!
英文:Katy French,翻译:优设 可视化不是单纯的数据展示,其真正价值是设计出可以被读者轻松理解的数据展示.设计过程中的每一个选择,最终都应落地于读者的体验,而非设计者个人. 本文提到了一些常 ...
- 五个 .NET 性能小贴士
原文:bit.ly/3wSpO4o 作者:Nikita Starichenko 翻译:精致码农 大家好!今天我想和大家分享几个 .NET 的性能小贴士与基准测试. 我的系统环境: BenchmarkD ...
- 配置高性能ElasticSearch集群的9个小贴士
Loggly服务底层的很多核心功能都使用了ElasticSearch作为搜索引擎.就像Jon Gifford(译者注:Loggly博客作者之一)在他近期关于"ElasticSearch vs ...
- 电脑内部,小贴士:电脑内部连接标准
小贴士:电脑内部连接标准 在介绍电脑内部连接标准之前,首先应该了解一下电脑内部接线的种类,以便分类处置.电脑内部尽管五颜六色的导线,其中导线的种类可以分为3 类,即电源线.信号线和控制线,而控制线又常 ...
- Spring Cloud实战小贴士:版本依赖关系
去年在博客上连载了<Spring Cloud构建微服务架构>的系列博文,虽然这部分内容得到了不少关注者们的支持,但是不得不说这些内容只是适用于Spring Cloud入门阶段对各个组件的初 ...
- Spring Cloud实战小贴士:Zuul处理Cookie和重定向
由于我们在之前所有的入门教程中,对于HTTP请求都采用了简单的接口实现.而实际使用过程中,我们的HTTP请求要复杂的多,比如当我们将Spring Cloud Zuul作为API网关接入网站类应用时,往 ...
最新文章
- c语言utc时间转换北京时间_C/C++标准库之转换UTC时间到local本地时间详解
- 想要永久远程办公?抱歉,你可能「不配」
- Cinder LVM backend cinder-volume service down
- mysql 重装之后_mysql重装之后 复制data
- Codeforces Round #313 (Div. 1) C. Gerald and Giant Chess DP
- mqtt如何发送心跳 安卓_互联网推送服务原理:长连接+心跳机制(MQTT协议)
- 分布式与系统架构的演变
- qt 打开html文件怎么打开文件夹路径,QT打开网页
- WAP2.0的历史使命和技术演变
- Python ASCII码
- iOS性能优化(一)卡顿优化
- C#编程,无损压缩图片的一种方法
- 腾讯云联手腾讯安全玄武实验室,提供「应用克隆」漏洞免费检测服务
- 20190404-亥姆霍兹方程、表面等离极化激元
- python argparse bool_python argparse 解析命令行参数
- Kafka提交offset机制
- 计算机仿真在线投稿系统,常见问题解决-计算机仿真官方投稿系统.doc
- 关于数据库中存储密码的加密
- 第十三届蓝桥杯大赛软件赛决赛(Java 大学B组)
- 织梦CMS鲜花商城类网站模板
热门文章
- android流媒体架构,基于Android平台的流媒体播放器的设计与实现
- html 边框轮廓,CSS Outline(轮廓)
- 帧同步分离逻辑层和渲染层_帧同步如何分离逻辑和渲染?
- 模块无法导入_你真的会用Python模块与工具包吗?
- java编译是用javac吗_用java自带工具javac和java编译运行java程序
- pythonATM,购物车项目实战6-用户登录功能的实现
- 帆软图表切换接口和图标轮播接口
- ccf公共钥匙盒python_[Python]CCF——公共钥匙盒(201709-2)
- 目标检测的数据增强 -- 代码实现
- 活动目录的灾难恢复操作指导之一