zekeTao的博客

一、安装node.js(自行百度)  -> npm -v 查看是否安装成功二、安装angular-cli   -> 教程三、在自己存放项目的目录下创建一个我们需要用的项目        ng new auction    (auction是项目名)四、生成项目的目录介绍e2e --> 用于自动测试node_modules --> 放置的是第三方依赖包,自己的写的代码不能放在...

插座(<router-outlet></router-outlet>) -> 一个标签一、辅助路由案例思路在app组件的模板上再定义一个插座来显示聊天面板单独开发一个聊天室组件，只显示在新定义的插座上通过路由参数控制新插座是否显示聊天面板二、在主页 app.component.html 后面新增一个插座<router-outlet name="aux">&...

一、路由守卫作用只有当用户已经登录并拥有某些权限时才能进入某路由。一个由多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。当用户未执行保存操作而试图离开当前导航时提醒用户。二、路由守卫的种类CanActivate：处理导航到某路由的情况。CanDeactivate：处理从当前路由离开的情况。Resolve：在路由激活之前获取路由数据。三、在...

一、onChanges属性内容改变时触发(string类型属性被赋予新值)对象中的string类型的值改变时不会触发onChanges二、DoCheck鼠标点击输入框，属性值变化(包括对象中属性变化)都会触发DoCheck三、view能够调用子组件内的方法方法一：<app-child #child2></app-child> @ViewChild('child2') ...

一、注入器(从容器中获取对象，相当于java中的@Autowired)(在组件的xxx.component.ts中使用)constructor(private productService: ProductService){...}二、提供器(把对象放入容器，相当于java中的@Component)(在app.module.ts -> @NgModule -> providers属性中...

一、新建一个demo项目ng new demo4二、在demo4项目中新建一个组件ng g component templateForm三、表单由angular管理，简单模板式表单示例HTML --> template-form.component.html<form #myFrom="ngForm" (ngSubmit)="onSubmit(myFrom.value)"> ...

一、在demo4项目中新建reactiveForm组件ng g component reactiveForm二、3种api // FromControl 相当于一个普通对象 username: FormControl = new FormControl('aaa'); // FormGroup 存放key:value形式的数据 formModel: FormGroup = new ...

一、新建两个组件(商品描述组件和销售员信息组件)ng g component productDesc ng g component sellerInfo二、product-desc.component.html<p> 来自XXXX的山泉水 </p>三、seller-info.component.html<p> 销售员ID ： {{sellerId}} &...

一、在第十二篇博客的demo3项目上改造二、新建order组件ng g component order三、思路：在price-quote组件中每秒刷新股价数据，点击一个button按钮后，把当前股价发送出去(emit)，price-quote的父组件app接收数据，并把数据赋值给自己的属性priceQuote（一个PriceQuote对象），order接收app的输入属性priceQuote，把该...

一、组件内属性输出给外部使用(适用于父子关系的组件)二、创建一个新项目demo3三、新建组件price-quoteng g component priceQuote四、在price-quote.component.ts中新建PriceQuote对象import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'...

一、项目根目录下npm install jquery --save二、项目根目录下npm install bootstrap --save三、往项目中加入bootstrap.css，在angular-cli.json中 apps -> styles 数组里面添加字符串 "../node_modules/bootstrap/dist/css/bootstrap.css"       往项目中...

零、用到的Angular指令     示例： *ngFor="let star of stars"一、修改app.component.html<app-navbar></app-navbar> <div class="container"> <div class="row"> <div class="c

一、在app下新建validator目录，创建一个ValidatorScript的ts类型文件，用来编写检验方法import {FormControl, FormGroup} from '@angular/forms'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/observable/of'; import 'rxjs...

一、新建一个angular路由项目 routerng new router --routing二、生成三个组件ng g component home ng g component product ng g component code404三、home.component.html<p> 这里是主页组件 </p>四、product.component.html<p...

一、父组件给子组件输入值二、创建一个angular项目 demo2三、在项目中创建一个order组件用于测试ng g component order四、在order.component.ts中定义两个属性，并且每三秒重置stockCode属性(鼠疫属性要加上@Input()注解)export class OrderComponent implements OnInit { @Input() ...

一、在查询参数中传递参数修改app.component.html中的商品详情页a标签<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情页</a>修改product.component.ts接收传递过来的参数import { Component, OnInit } from '@angular/core'; i...

一、基本HTML属性绑定tableColspan的值会赋给colspan<td [attr.colspan]="tableColspan">Something</td>二、CSS类绑定[class]中的值someExpression会覆盖"aaa bbb"<div class="aaa bbb" [class]="someExpression">