![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Angular 6.5
hengxinxuan
这个作者很懒,什么都没留下…
展开
-
Angular路由(1)--知识点
在这里有关Angular相关的知识,是学习网上视频教程中整理记录的知识。 Angular开发的应用就是SPA模式。讲Angular路由之前我们先讲SPA,这样才能更好的理解路由是干什么的。 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时...原创 2019-01-05 21:13:14 · 544 阅读 · 1 评论 -
Angular组件生命周期
要想用好一个组件,知道组件的生命周期是必须的。下面直接先上代码测试import { Component, OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy, SimpleChange, SimpleChanges, In...原创 2019-01-14 23:51:52 · 575 阅读 · 0 评论 -
Angular路由(7)--路由守卫
所谓路由守卫指的就是防止路由自由进出的功能,分进和出3种情况。1. CanActivate 处理导航进入到某路由的情况。防止随意进入。使用方法:首先建立一个类,继承一个CanActivate,在实现方法CanActivate方法中做逻辑计算,返回true false,当真时允许进入路由通过,否者拒绝。import { Routes, RouterModule } from '@a...原创 2019-01-08 14:24:15 · 2068 阅读 · 0 评论 -
Angular路由(6)--辅助路由
辅助路由为了解决一个页面放置多个插座的问题,这很重要。// 主路由插座写法<router-outlet></router-outlet>// 辅助路哟插座写法, 多了个name属性<router-outlet name="otherOutlet"></router-outlet>实现辅助路由分三个步骤1. 声明一个辅助路由...原创 2019-01-08 13:28:42 · 242 阅读 · 0 评论 -
Angula组件间通讯(3)--组件的中间人模式
中间人模式就是2个完全独立的组件右一个中间人来完成他们的数据交互。在Angular中如何有如下方式1. 2个组件如果是兄弟组件,就是有一个共同的父组件,那么由它的父组件来当他们的中间人。3. 如果2个组件没有共同的父组件,也就是不是兄弟组件关系。那么可以用一个服务模块来当他们的中间人。...原创 2019-01-12 22:22:45 · 191 阅读 · 0 评论 -
Angula组件间通讯(2)--组件的输出属性
在父子组件间,子组件向父组件传输数据,Angular中有一个叫EventEmitter的对象发送自定义的事件。EventEmitter这个方法是在Rxjs中一个类中。要使用这个这个,需要导入angular/core 的这个核心组件。import { Component, OnInit } from '@angular/core';1. 定义一个事件方法:用@Outpu...原创 2019-01-12 21:35:55 · 150 阅读 · 0 评论 -
Angula组件间通讯(2)--组件的输入属性
1. 什么是组件的输入属性 用@Input() 装饰器注解的属性,用来从父组件接收数据。@Input()myName: string;组件的输入属性几个概念:输入属性用在2个具有父子关系的组件之间。 数据绑定是单向的,父组件-->到子组件。假如子组件的输入属性值改变了,父组件也不会改变,只能父组件输入给子组件属性值。 ...原创 2019-01-12 18:57:37 · 133 阅读 · 0 评论 -
Angula组件间通讯(1)--简单介绍
组件设计模式是Angular的核心设计思想。不是把功能模块设计成一个个组件就完事了的,组件之间会有一些通信。那如何让这个通信也能做到松耦合才行。 在之前讲到的依赖注入是一种方式,但是光只有一种方式还不够,肯定要有更多的手段来实现。下面就会讲Angular的其他手段。 组件的输入输出属性 使用中间人模式传递数据 组件生命周期以及Angular的变化发现机制。...原创 2019-01-12 18:33:13 · 183 阅读 · 0 评论 -
Angular中的管道
在Angular中的管道就是指处理原始值到显示值的一个方法。是不是很好理解。Angular中已经内置了10来个管道方法,我们自己也可以定义管道方法。 1. 内置管道控制器中的代码是birthday: Data = new Data();在模版中加入显示一个生日<p>我的生日是:{{birthday}}</p>显示结果是: 我的...原创 2019-01-12 17:57:52 · 520 阅读 · 0 评论 -
Rxjs响应式编程
Angular中默认用了Rxjs。所以我们也要学习一下。 首先何为响应式编程:就是异步数据编程。他是以观察者模式为核心。比如针对按钮点击事件我们做些逻辑编写。在这里我们可以正对任何对象,比如一个变量的改变了,一个数组内容等等。如在游戏中我们监听玩家的生命值如果为0了,那就要处理一堆死亡逻辑。 观察者模式是什么我就不讲了,对于一个有编程经验的人来说,...原创 2019-01-12 17:11:00 · 338 阅读 · 0 评论 -
Angular数据绑定(4)--双向绑定
何为数据双向绑定:就是 视图<-->控制器互相绑定。 不管哪个先改变,另一个都将改变。我们前面讲的2种绑定方式1.事件绑定是 视图--> 控制器。属于单向绑定,视图改变控制器。<input (input)="onInputEvent($event)">2.属性绑定是 控制器--> 视图。属于单向绑定,控制器改变视图。<input [...原创 2019-01-12 16:03:40 · 286 阅读 · 0 评论 -
Angular数据绑定(3)--Html属性绑定
当元素没有dom属性的时候我们所以要用html属性绑定。Html属性绑定分三种情况:基本Html属性绑定、CSS类绑定、样式绑定 1. 基本Html属性绑定。语法如下<td [attr.colspan]= "tableColspan">Something</td> 1) [att.colspan] 代表属性绑定,colspan是属性的名字; 2...原创 2019-01-12 15:03:08 · 908 阅读 · 0 评论 -
Angular数据绑定(2)--Dom属性绑定
上一篇文章中有讲到属性绑定,在这里我们单独来再来讲一下。首先要明白属性绑定的几个概念:1. 差值表达式也是属性绑定,在模版中的差值表达式会被Angular编译成另[属性]形式,2中写法平实都是可以用的,看你自己个人习惯就好。差值表达式方式:<img src = {{imgUrl}}>中括号方式:<img [src] = "imgUrl">2....原创 2019-01-12 14:04:16 · 394 阅读 · 0 评论 -
Angular路由(5)--子路由配置
下面代码中配置了商品栏目下有商品详情和销售方信息2个组件 const routes: Routes = [ {path: `product/:id`, component: ProductComponent, children[ {path: ``, component: ProductDescComponent}, {path: `seller/:id`, comp...原创 2019-01-06 22:38:27 · 635 阅读 · 0 评论 -
Angular路由(4)--重定向路由 redirectTo
举例,当访问没有指定页面地址的路径时,让它转到指定页面 const routes: Routes = [ {path: ``, redirectTo: `/home`, pathMatch: `full`}, {path: `home`, component: HomeComponent},];当用户访问 http://localhost:4200重定向到 http:/...原创 2019-01-06 22:24:35 · 6161 阅读 · 1 评论 -
Angular路由(3)--参数快照和参数订阅api区别
1.参数快照 snapshot就如照片一样,拍摄到那一刻是什么就是什么,不会动态知道值的变化this.productId = this.routeInof.snapshot.params['id']; 2.参数订阅 subscribe字面很好理解,既然我订阅了,你有新的变化,都要告诉我,我随时都知道。this.productId = this.routeInof.sub...原创 2019-01-06 22:14:13 · 652 阅读 · 0 评论 -
Angular路由(2)--使用Angular Route导航
在路由时传递数据1.在查询参数重传递数据/product?id=1&name=小明 => ActivateRoute.queryParams[id]例:http://localhost:4200/product?id=1定义数据<a [routerLink]="['/product']" [queryParams]= "{id:1}">...原创 2019-01-06 20:34:06 · 129 阅读 · 0 评论 -
Angular数据绑定(1)--绑定方式\事件绑定
首先我们要理解何为数据绑定: 数据绑定就是将组建控制器中的方法或属性与模版链接起来。简单理解就是视图和控制器进行一个数据交互绑定。 绑定类型分事件绑定和属性绑定共2种。 绑定方式1: 差值表达式(属性绑定)<h1>{{myName}}</h1>模版这里显示我的名字地方直接绑定了控制器的myName属性。 绑定方式2: ...原创 2019-01-11 15:23:26 · 951 阅读 · 0 评论 -
Angular依赖注入
什么是依赖注入我就不解释了,很多编程语言里面都有,在angular中如何使用学会就好。在angular中使用依赖注入有了个名词,一个叫注入器,另一个叫提供器。 注入器:将通过组建的构造函数注入组建所需要的对象。constructor(private myService: MyService){...} 上面的代码,我们申明了一个myService的服务,在这...原创 2019-01-09 15:12:28 · 174 阅读 · 0 评论