Angular7
1.绑定html
在ts里面自定义一个html变量
html = '<a> 这是html变量 </a> ';
在html打印出来
直接打印:{{html}}
<br />
绑定html:<span [innerHtml]='html'></span>
2.ng
3.管道
主要用于格式化数据。
<a>{{'Abc'| uppercase}}</a>
<hr>
<a>{{'Abc'| lowercase}}</a>
<hr>
<a>{{today | date:'yyyy-MM-dd hh:mm:ss'}}</a>
更多管道:http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34
4.事件
click 点击(有延迟)
tap 点击(无延迟)
keydown 键盘按下
keyup 键盘弹起
change checkbox状态改变事件
ngModelChange input输入数据改变
press 长按
pan 滑动事件,滑动触发多次
swipe 滑动事件,滑动触发一次
rotate 旋转事件(ionic3的,angular没试过)
pinch 捏合事件 (ionic3的,angular没试过)
touch四件套
touchstart 手指碰到屏幕触发
touchmove 手指在屏幕移动多次触发
touchend 手指离开触发
touchcancel 滑动中断触发
ts:
keyup(e) {
console.log(e.target.value); // 显示目标值(输入框内的值)
console.log(e.key); // 按键,回车键为Enter
console.log(e.keyCode); // 按键code,回车键为13
}
html:
<input type="text" (keyup)="keyup($event)" />
上面e.target是指定到那个dom节点,也就是这个text,所以可以在后台对这个节点进行操作,如
e.target.style.color = 'blue';
5.双向数据绑定 MVVM
MVVM也就是module view module view,再这里是模块影响视图,视图影响模块,也就是双向数据绑定,例如
<input type="text" [(ngModel)]="title" />
需要在app.module.ts引入
import { FormsModule } from '@angular/forms'; imports: [
FormsModule
]
6.获取dom
html:
<app-header #header></app-header> <div id='myBox'>原生获取dom</div> <div #myBox>ViewChild获取dom</div>
ts:
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; @Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit, AfterViewInit { @ViewChild('myBox') myBox: any;
@ViewChild('header') header: any;
constructor() { }
ngOnInit() {
// 组件和指令初始化完成 并不是真正的dom加载完成
}
ngAfterViewInit() {
// 应该在这个生命周期函数里面获取dom,调用这个函数需要先import
// 原生获取dom,并改变样式
console.log(document.getElementById('myBox'));
document.getElementById('myBox').style.background = 'red';
// ViewChild获取dom,并改变样式
console.log(this.myBox.nativeElement);
this.myBox.nativeElement.style.background = 'blue';
// ViewChild获取子组件(可以把子组件看成一个dom),并调用子组件的方法
console.log(this.header);
this.header.run();
}
}
效果图:
7.侧边框
html
<div class="content">
内容区域
<button ion-button (click)="show()">弹出侧边栏</button>
</div> <aside #aside>
侧边栏
</aside>
scss
aside{
width: 100px;
height: %;
position: absolute;
right: 0px;
top: 0px;
background: azure;
transform: translate(%,);
transition: all 1s;
}
ts
@ViewChild('aside') aside: any;
show() {
this.aside.nativeElement.style.transform = 'translate(0, 0)';
}
效果图:
Angular7的更多相关文章
- Angular7上手体验
准备工具 Node.js Angular requires Node.js version 8.x or 10.x. 查看当前你的node版本可以在CMD中输入 node -v npm -v 开发工具 ...
- Angular7.1.4+Typescript3.1框架学习(一)
起因:学习ionic4之前先学习下angular+ts 以win10为开发平台:当前最新版本为angular7;根据官网资料做如下总结: 1. angular安装 前提:Node.js 的 8.x 或 ...
- 【前端开发工具】WijmoJS 2018 v3 正式发布,全面支持Angular7
WijmoJS(前端开发工具包)2018年度第三个大版本已经正式发布,本次更新除了全面支持Angular7之外,还允许用户使用Web Workers在前端更高效地导出PDF.智能的分组表头属性.全新的 ...
- Angular7教程-01-Angular开发环境配置
本教程基于angular7(2018-11-04) 1. 安装node.js 下载地址: http://nodejs.cn/download/ 下载对应自己操作系统的版本安装即可. 2.安装 angu ...
- Angular7教程-02-Angular项目目录及基本文件说明
本教程基于Angular7,更新时间2018-11-05. 1. 项目根目录如下: e2e文件夹:end to end,测试目录,主要用于集成测试. node_modules:项目的模块依赖目录. s ...
- 在angular7中创建组件/自定义指令/管道
在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...
- ASP.NET Core Web API + Angular 仿B站(一) 目的分析以及创建 WebAPI + Angular7 项目
前言: 本系列文章主要为对所学 Angular 框架的一次微小的实践,对 b站页面作简单的模仿. 本系列文章主要参考资料: 微软文档: https://docs.microsoft.com/zh-cn ...
- Angular7环境搭建报错
昨天写的2019年Angular7——安装搭建路由方法不太正统,今天又去翻了下angular官网,跟着上面的环境搭建与部署走了一遍 从安装@angular/cli命令行工具开始 本篇主要记录下搭建过程 ...
- 2019年Angular7——安装搭建路由
Angular 中文官方:https://www.angular.cn/ 为什么要看Angular?我也不知道,因为公司有个Angular的项目要维护.听说Angular的版本已经到7了.以前没怎么玩 ...
- angular6 升级到 angular7+ 最新Ng-zorro
angular7 出来有一段时间了,然后我们项目一直用的是angular6, 看到一直再用的Ng-Zorro 更新版本了,然后就觉得把目前的项目也升级一下把. 目前我本地cli版本是6.0.8我要把他 ...
随机推荐
- pydensecrf的使用
参考:https://github.com/lucasb-eyer/pydensecrf 1.使用 对于图像来说,最简单的使用该库的方法是使用DenseCRF2D类: import numpy as ...
- java8 Lambda表达式的新手上车指南(1)--基础语法和函数式接口
背景 java9的一再推迟发布,似乎让我们恍然想起离发布java8已经过去了三年之久,java8应该算的上java语言在历代版本中变化最大的一个版本了,最大的新特性应该算得上是增加了lambda表达式 ...
- mysql分割逗号办法
https://blog.csdn.net/xcymorningsun/article/details/73436568
- LOJ2396 JOISC2017 长途巴士 斜率优化
传送门 将乘客按照\(D_i\)从小到大排序并重新标号.对于服务站\(j\),如果\(S_j \mod T \in (D_i , D_{i+1})\),那么可以少接一些水,在保证司机有水喝的情况下让编 ...
- 2019年美国大学生数学建模竞赛(MCM/ICM) E题解题思路
这也许是我大学生涯最后一次参加数学建模比赛了吧,这次我们选择的问题是E题,以下是我们解题时候的一些思路.很多不易体现的项目产生对环境造成影响的指标可以由一些等同类型的指标来代替,如土地.森林植被被破环 ...
- 循环语句之for循环
什么是循环语句? 循环语句可以在满足循环条件的情况下,反复执行某一段代码,这段被重复执行的代码被称为循环体语句,当反复执行这个循环体时,需要在合适的时候把循环判断条件修改为false,从而结束循环,否 ...
- [第二届构建之法论坛] 预培训文档(C++版)
本博客是第二届构建之法论坛暨软件工程培训活动预培训文档中[适用于结对编程部分的C++版本],需要实验者有一部分C++基础. 目录 Part0.背景 Part1.配置环境 Part2.克隆项目 Part ...
- Vue.Draggable
Vue.Draggable拖动效果 下载包:npm install vue-draggable --save 组件中引进依赖: import draggable from 'vuedraggable' ...
- 解决SpringSecurity阻止ajax的POST和PUT请求,导致403Forbidden的问题
前言: 最近在整合springboot+springsecurity,在PUT请求的时候出现了403的问题,这里记录一下解决的过程 到Spring的官网去查查SpringSecurity的参考手册看看 ...
- 转 spring注解式参数校验
转自: https://blog.csdn.net/jinzhencs/article/details/51682830 转自: https://blog.csdn.net/zalan01408980 ...