恒心的专栏

       在这里有关Angular相关的知识，是学习网上视频教程中整理记录的知识。        Angular开发的应用就是SPA模式。讲Angular路由之前我们先讲SPA，这样才能更好的理解路由是干什么的。        单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时...

要想用好一个组件，知道组件的生命周期是必须的。下面直接先上代码测试import { Component, OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy, SimpleChange, SimpleChanges, In...

所谓路由守卫指的就是防止路由自由进出的功能，分进和出3种情况。1. CanActivate 处理导航进入到某路由的情况。防止随意进入。使用方法：首先建立一个类，继承一个CanActivate，在实现方法CanActivate方法中做逻辑计算，返回true false，当真时允许进入路由通过，否者拒绝。import { Routes, RouterModule } from '@a...

辅助路由为了解决一个页面放置多个插座的问题，这很重要。// 主路由插座写法<router-outlet></router-outlet>// 辅助路哟插座写法, 多了个name属性<router-outlet name="otherOutlet"></router-outlet>实现辅助路由分三个步骤1. 声明一个辅助路由...

中间人模式就是2个完全独立的组件右一个中间人来完成他们的数据交互。在Angular中如何有如下方式1. 2个组件如果是兄弟组件，就是有一个共同的父组件，那么由它的父组件来当他们的中间人。3. 如果2个组件没有共同的父组件，也就是不是兄弟组件关系。那么可以用一个服务模块来当他们的中间人。...

        在父子组件间，子组件向父组件传输数据，Angular中有一个叫EventEmitter的对象发送自定义的事件。EventEmitter这个方法是在Rxjs中一个类中。要使用这个这个，需要导入angular/core 的这个核心组件。import { Component, OnInit } from '@angular/core';1. 定义一个事件方法:用@Outpu...

1. 什么是组件的输入属性       用@Input() 装饰器注解的属性，用来从父组件接收数据。@Input()myName: string;组件的输入属性几个概念：输入属性用在2个具有父子关系的组件之间。 数据绑定是单向的，父组件-->到子组件。假如子组件的输入属性值改变了，父组件也不会改变，只能父组件输入给子组件属性值。         ...

       组件设计模式是Angular的核心设计思想。不是把功能模块设计成一个个组件就完事了的，组件之间会有一些通信。那如何让这个通信也能做到松耦合才行。       在之前讲到的依赖注入是一种方式，但是光只有一种方式还不够，肯定要有更多的手段来实现。下面就会讲Angular的其他手段。 组件的输入输出属性 使用中间人模式传递数据 组件生命周期以及Angular的变化发现机制。...

        在Angular中的管道就是指处理原始值到显示值的一个方法。是不是很好理解。Angular中已经内置了10来个管道方法，我们自己也可以定义管道方法。 1. 内置管道控制器中的代码是birthday: Data = new Data();在模版中加入显示一个生日<p>我的生日是:{{birthday}}</p>显示结果是: 我的...

       Angular中默认用了Rxjs。所以我们也要学习一下。       首先何为响应式编程：就是异步数据编程。他是以观察者模式为核心。比如针对按钮点击事件我们做些逻辑编写。在这里我们可以正对任何对象，比如一个变量的改变了，一个数组内容等等。如在游戏中我们监听玩家的生命值如果为0了，那就要处理一堆死亡逻辑。       观察者模式是什么我就不讲了，对于一个有编程经验的人来说，...

何为数据双向绑定：就是 视图<-->控制器互相绑定。 不管哪个先改变，另一个都将改变。我们前面讲的2种绑定方式1.事件绑定是 视图--> 控制器。属于单向绑定，视图改变控制器。<input (input)="onInputEvent($event)">2.属性绑定是 控制器--> 视图。属于单向绑定，控制器改变视图。<input [...

当元素没有dom属性的时候我们所以要用html属性绑定。Html属性绑定分三种情况：基本Html属性绑定、CSS类绑定、样式绑定 1. 基本Html属性绑定。语法如下<td [attr.colspan]= "tableColspan">Something</td>  1) [att.colspan] 代表属性绑定，colspan是属性的名字；  2...

上一篇文章中有讲到属性绑定，在这里我们单独来再来讲一下。首先要明白属性绑定的几个概念：1. 差值表达式也是属性绑定，在模版中的差值表达式会被Angular编译成另[属性]形式，2中写法平实都是可以用的，看你自己个人习惯就好。差值表达式方式：<img src = {{imgUrl}}>中括号方式:<img [src] = "imgUrl">2....

下面代码中配置了商品栏目下有商品详情和销售方信息2个组件 const routes: Routes = [ {path: `product/:id`, component: ProductComponent, children[ {path: ``, component: ProductDescComponent}, {path: `seller/:id`, comp...

举例，当访问没有指定页面地址的路径时，让它转到指定页面 const routes: Routes = [ {path: ``, redirectTo: `/home`, pathMatch: `full`}, {path: `home`, component: HomeComponent},];当用户访问 http://localhost:4200重定向到 http:/...

1.参数快照 snapshot就如照片一样，拍摄到那一刻是什么就是什么，不会动态知道值的变化this.productId = this.routeInof.snapshot.params['id']; 2.参数订阅 subscribe字面很好理解，既然我订阅了，你有新的变化，都要告诉我，我随时都知道。this.productId = this.routeInof.sub...

 在路由时传递数据1.在查询参数重传递数据/product?id=1&name=小明    => ActivateRoute.queryParams[id]例：http://localhost:4200/product?id=1定义数据<a [routerLink]="['/product']" [queryParams]= "{id:1}">...

    首先我们要理解何为数据绑定：    数据绑定就是将组建控制器中的方法或属性与模版链接起来。简单理解就是视图和控制器进行一个数据交互绑定。    绑定类型分事件绑定和属性绑定共2种。    绑定方式1: 差值表达式（属性绑定）<h1>{{myName}}</h1>模版这里显示我的名字地方直接绑定了控制器的myName属性。 绑定方式2: ...

    什么是依赖注入我就不解释了，很多编程语言里面都有，在angular中如何使用学会就好。在angular中使用依赖注入有了个名词，一个叫注入器，另一个叫提供器。    注入器：将通过组建的构造函数注入组建所需要的对象。constructor(private myService: MyService){...}       上面的代码，我们申明了一个myService的服务，在这...