![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
angular
肖ZE
这个作者很懒,什么都没留下…
展开
-
angular——公共服务
公共服务创建公共服务# 在 services 目录下创建 storage 服务ng g service services/stroage配置服务在 app.module.ts 下// 引入配置服务import { StorageService } from './services/storage.service'providers: [ StorageService...原创 2019-06-06 09:46:48 · 560 阅读 · 1 评论 -
angular——全局样式
假如项目创建使用 --style=sass 选项, 这是一个 .sass文件的代替, 同样适用于 scss/less/styl.您可以通过 angular.json 中项目的构建目标选项中的 styles 选项添加更多全局样式。这些将被加载,就像您将它们添加到index.html中的标记中一样。"architect": { "build": { "builder": "@angu...转载 2019-07-04 11:21:13 · 3066 阅读 · 0 评论 -
angular——动画
引包# 根据你 angular 整体版本引入cnpm i @angular/animations@x.x.x -Sapp.module.ts 中注入模块import { BrowserModule } from '@angular/platform-browser';import { BrowserAnimationsModule } from '@angular/platform-...原创 2019-07-09 12:30:30 · 138 阅读 · 0 评论 -
angular——获取 DOM 元素
当需要获取当前组件模版里的某一个元素时@ViewChild 配合 local template variable原生元素可以通过 local variable 获取。在写组件时,我们可以直接在组件模版里给这个 input 标签加标记(譬如:#myInput), 然后把标记传给 @ViewChild 用来获取该元素。当组件初始化后,你就可以通过 renderer 在这个 input 标签上执行 ...转载 2019-07-07 21:18:44 · 5369 阅读 · 0 评论 -
angular——数据操作 及 管道
// 数据绑定<div [title]='title'> {{content}}</div>// 解析绑定 html 标签content: string = '<h1>我是 html</h1>'<div [innerHtml]='content'></div>// 循环遍历数组<div *ngFor...原创 2019-06-05 09:47:23 · 1158 阅读 · 0 评论 -
angular——脚手架初始项目 及 部分目录讲解
安装脚手架cnpm i -g @angular/cli# 检查版本ng v创建项目ng new angular-app# 如果要跳过 npm i 安装ng new angular-app --skip-install打开项目ng serve --open原创 2019-06-04 22:40:43 · 986 阅读 · 0 评论 -
angular——ionic
ionic安装cnpm i -g cordova ionic创建项目# 空白栏ionic start myApp blank# 底部切换 (适合手机 app)ionic start myApp tabs# 侧边栏 (适合 pc 端)ionic start myApp sidemenu运行项目ionic serve文件目录e2e:端对端测试文件node...原创 2019-06-09 22:22:24 · 2175 阅读 · 0 评论 -
angular——自定义模块 配置路由模块懒加载
自定义模块当项目比较小的时候可以不用自定义模块,但是当项目非常庞大的时候,可以使用自定义模块来组织项目,并通过 angular 自定义模块实现路由的懒加载# 创建 user 模块ng g module modules/user# 创建 user 模块下的子组件ng g component modules/user/components/funng g component modul...原创 2019-06-09 16:34:15 · 1035 阅读 · 2 评论 -
angular——路由
app-routing.module.ts 中配置路由// 引入组件import { FunComponent } from './components/fun/fun.component'import { HomeComponent } from './components/home/home.component'// 配置路由const routes: Routes = [ ...原创 2019-06-09 12:01:26 · 234 阅读 · 0 评论 -
angular——数据交互(get、jsonp、post)
HttpClientModule 模块get 方法在 app.module.ts 中引入 HttpClientModule 模块并注入import { HttpClientModule } from '@angular/common/http'imports: [ HttpClientModule,],在用到的地方引入 HttpClient 并在构造函数声明impor...原创 2019-06-09 11:19:20 · 498 阅读 · 0 评论 -
angular——Rxjs 异步数据流编程
Rxjs 是一种针对异步数据流编程工具,或者叫响应式扩展编程,目的就是异步编程,常用的 Observable 和 fromEventcallback 和 promise 异步获取数据 name: any = 'bob' getData () { // Callback 异步获取数据 function callback (cb) { setTimeout(...原创 2019-06-09 09:48:10 · 669 阅读 · 0 评论 -
angular——生命周期函数
生命周期函数作用ngOnChanges()Angular(重新)设置数据绑定输入属性时的响应。该方法接收 SimpleChanges 当前和先前属性值的对象。ngOnInit() 在一个或多个数据绑定输入属性发生更改 之前和之后调用。主要用在父子组件传值时ngOnInit()在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。在第一次...原创 2019-06-09 08:19:52 · 7832 阅读 · 2 评论 -
angular——父子组件通信
父传子 @input父组件不仅可以给子组件传递简单的数据,还可以把自己的方法以及整个父组件传给子组件子组件获取父组件的 msg 数据父组件调用子组件的时候传入数据<app-son [msg]="msg"></app-son>子组件引入 Input 模块import { Component, OnInit, Input } from '@angular/...原创 2019-06-08 22:15:49 · 6429 阅读 · 0 评论 -
angular——ViewChild
ViewChild获取 DOM 节点模板中给 DOM 节点起个名字 <div #domName> 我是一个 DOM 节点 </div>业务逻辑组件内引入 ViewChild import { Component, OnInit, ViewChild } from '@angular/core'在类里面获取 DOM 节点 @ViewC...原创 2019-06-08 21:06:27 · 660 阅读 · 0 评论 -
angular——监听方法
通过changes订阅observable,监听query结果集变化(推荐)@Component({ selector: 'my-list' })export class MyList implements AfterContentInit { @ContentChildren(ListItem) items: QueryList<ListItem>; ngAfterCo...原创 2019-08-05 17:59:40 · 1681 阅读 · 0 评论