liweibo348的博客

这些操作主要是用命令 ，方便快捷。下面一 一解释：生成项目之前，先要安装angular2，或angular4,6 版本也可。还需要安装angular命令工具。命令如下所示：npm install angular  //安装angularnpm install -g  @angular/cli   //安装angular命令工具ng new myproject  //生成项目 myp...

官方定义叫：模板本地变量。把它当成一个组件的别名即可。如：<md-sidenav  #mysidenav></md-sidenav><main><button (click)="mysidenav">打开侧边栏</button></main> 再如： ...

输入属性 @Input()，简单理解为从父组件传递数据到子组件。输出属性@Output()，简单理解为从子组件传递数据到父组件。这样就构成了双向的数据绑定。下面看代码示例：app-stars是子组件，newRating是父组件的变量，要想让布局中rating的变化影响到newRating的变化，需要在子组件中把rating的变化作为一个事件发射出去，代码为第二个图片中的输出属性@O...

依赖注入，注入的就是一个服务，其实就是一个类。依赖注入的过程就是实例化这个类，即实例化这个服务，怎么实例化呢？那就需要提供器providers来提供了。生成一个服务的命令：ng g service shared/productservice   //在文件夹shared下生成一个productservice  服务 这是服务中的代码片段，第一行的@Injectable（）表示在...

提供器一般的格式为：providers：[provider:xxx,useClass:xxxxxx]工厂和值声明在提供器中的使用就是改变useClass，即写为：providers：[provider:xxx,useFactory:xxxxxx],                                                                      ...

简介：在模板中（布局文件）常用的指令有：ngForm  ngModel  ngModelGroup。示例如下：加了ngform指令，整个表单的处理就交给angular处理了。加了ngModel指令，表单项中的值才会真正的写入，别的地方才能真正地调用到，注意ngModel指令必须写name，当然这种指令有两种写法，如上图。在ngModel外面可以套一层ngModelGroup指令...

   上图左边是模板式表单中的指令，右图是对应的响应式表单的类。一 一对应。  如何在布局文件中区分是哪种表单？看指令，若是form开头的指令是响应式表单，若是以ng开头的指令是模板式表单。且只有模板式表单中可以用模板本地变量（#name形式）...

两步：1.在ts代码中写好数据模型。2.在布局文件中用对应的指令把数据模型与布局中的dom联系起来。看代码：   这三个类的作用范围：FormGroup最大，旗下有FormControl，FormArray。FormGroup也可以嵌套放FormGroup。FormArray下可以有FormControl。总之，数据模型的最开始是需要有FormG...

angular有自带的校验器，如 required  minLength....等等。还可以自定义校验器，下面自定义了两个校验器，首先是校验单个表单项的，再就是校验多个表单项的。  这就是用FormBuilder的好处，可以方便的在FormControl，FromGroup....中添加校验器。...

下面以一个http请求数据的例子说明： 1.不用async时管道的代码： 2。使用async管道自动订阅流: 用法就是在布局文件中加入async异步管道，这样就可以实现自动订阅流的功能，从而在ts代码中就不用手动调用subscribe进行订阅Observable流。...

看例子：2.1-4 的意思是：2表示数字的整数部分是两位，1-4表示数字的小数部分位数最少是一位，最多是4位，尽量往多的算。要是pi的值取为3.1415926的话，那么被管道格式化后的值为：03.1416...

一般在ts逻辑代码里会通过Store的dispatch()方法发送一个Action对象，Action对象中第一个参数是一个动作类型类型，第二个参数是payload即自己设置的当该动作发生时携带的值，然后reducer对这个Action进行处理，reducer中第一个参数是原本的状态值，第二个参数是Action，该函数做的事就是改变原本的状态值。如：station和train是ts代码中事件响应...

1.[ngClass]="{true:'s2',false:'s1'}[ enable == true ]"                            其中s1  s2 为样式 2.[ngClass]="{'hidden':enable}"       hidden为自己写的样式。enable为true或false...

进入到你新建的项目中：按照如此啊步骤执行：npm cache clean --forcenpm updatenpm installng buildng serve

display:flex; 设置在外层容器父级，表示该容器使用弹性盒布局方式flex:1; 设置在子项，数值表示占据剩余空间的份数 详细解释见文章：https://www.jianshu.com/p/07e0c16a4ff5#...

ng new myproject -si --style=scss生成一个项目，si表示skip install，就是跳过生成项目时的npm自动安装下载一些包，并规定项目中的样式文件格式为scss而非css，这样有利于后期的material ui设计。 用vscode打开项目，在vscode的终端：cnpm installng g m core   //生成一个核心模块（m为m...

 响应式表单:ts代码中要引入ReactiveFormsModule。 响应式表单涉及到的类，命令。其中类有三个，这三个类跟后面五个指令是呼应的，响应式表单的原理就是根据模板要显示的内容在ts代码中构建好代码模型，代码模型的构建就是运用这三个类。其中命令有右边的五个，响应式表单命令都是以form开头，其中以name结尾的命令在模板中使用时，必须在formGroup的范围中。...

以上代码就是模板式表单的运用。ngModel name="username"这种模式的写法是必须的，它能反应所在数据到需要的地方。 模板式表单:要引入FormsModule,对应的指令：NgForm，NgModel,NgModelGroupNgForm：模板中只要有<form></form>标签，就会自动的有NgForm命令。...

 上面的代码段就是校验代码，写在一个单独的文件中，并暴露出去，用于外部进行调用。 由下面的代码可知：使用的是响应式表单。下面就是ts代码中对校验代码进行调用，调用的方法如下所示这就是使用FormBuilder的好处，可以方便的添加自己写好的校验器。  上面都是在讨论响应式表单校验。 下面讨论在模板式表单中，怎样校验？要在模板式表单中进行校验，需要用指...

1. 首先找到项目中的angular.json文件，里面有如下代码："index": "src/index.html","main": "src/main.ts",index指定显示的启动时显示的页面。main指定启动时需要加载得脚本,即main.ts。 2. main.js打开main.ts文件，发现有很多引入的类，引入用的是import关键字。主要看这句代码：...

angular应用是一个单页应用，优点是所有的页面跳转都在一个页面中，这样就不用每次页面跳转时都要重新加载页面css等文件。路由是单页应用中很重要的一环，页面之间的跳转就靠路由实现。 Router和RouterLink具有一样的功能，不同在于Router是在代码中运用路由，RouterLink是在布局文件即html文件中运用路由。Routes是在路由的配置中出现，在逻辑代码中进行路...

子路由存在的意义？在一个组件中还有一些组件，这时候就需要子路由了，可以简单地把子路由看成路由，就是在路由的配置中用children:[{path:'',......},{......}]这样的形式说明子路由，简单地理解为路由嵌套吧。下面的代码就是app-routing.module.ts中的路由配置部分：上面代码中子路由配置好之后，如何将子路由对应的那两个组件显示出来呢？还是需要用到插座即...

以一个案例说明：最终的效果图：绿色的为聊天组件 下面看代码：这是在app组件上的布局文件，代码最后一行有一个别名为aux的插座，它就是用来显示聊天面板的插座。聊天组件为chat，这里还不写了，接着看路由的参数控制，当点击“开始聊天”的时候，显示aux插座中的chat组件。当点击“结束聊天”时，显示aux插座，但为空。  下面是对应的app-routing,m...

大概包含三种：  这些都是我们经常用的，只是不晓得它是html属性。   

 searchinput就是一个事件流，调用valueChanges返回值为Observable对象，在被观察者被订阅前调用了debounceTime函数，作用是实现输入框的值在时间间断超过500毫秒再更新输入框的值，否则不更新。其实就是先不订阅，先把需要处理的事情结束后 再订阅。...

路由守卫就是保证在特定条件下才路由到某个页面。具体的使用场景如下：路由守卫有以下3种：第1种，满足条件时才导航到目的路由。第2种，在a页面处理完成后，才能离开a页面。第3种，在页面显示之前，提前加载好数据。 以CanActivate为例：写好LoginGuard类，在路由配置中配置好。如下所示：注意看红色箭头部分，一个都不能少。 以下是LoginGuar...

resolve守卫的作用就是写一个类实现Resolve，然后实现相应的方法，在该方法中，提前把数据请求等工作做好，然后在路由跳转（如跳转到A组件）的时候把这些数据传过去，这样A组件中要展示的数据就会及时展示出来。但是没有resolve守卫这种机制的话，就只能在A组件显示再从服务器请求数据，则会导致页面展示不及时的问题。...

angular中，依赖注入的唯一方法就是在构造函数中。依赖注入：Dependency Injection,简称DI控制反转：IOCDI与IOC是angular依赖的一体两面，IOC把代码的控制权交给外部，运用IOC思想的框架叫IOC容器，angular就是一个IOC容器。要达到控制反转的目的，就需要使用依赖注入。下面就是依赖注入的使用：providers中表示需要依赖注入的...

https://www.jianshu.com/p/67acdd21f89c

1 把js文件放到src/assets目录下。例如我的js文件为 remogeo.js2 在src目录下的index.html中增加如下语句： <script type="text/javascript" src="assets/remogeo.js"></script>3 在需要调用js代码的地方作如何声明：declare var Remo...