angular cli 切换 css_angular视频学习笔记

angular2/4命令：

1，安装 Angular CLI npm install -g @angular/cli

6,#全局安装 Angular CLI (可以例用 ng -v 查看安装的版本信息)

2，ng serve --open

（ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。）

3，D：（到该目录）

4，dir（该目录所有文件）

5，.ts转换成js--- $ tsc xxx.ts (把 function(){} 替换为 () =>：)

....ng new (创建得项目名字)；生成得文件以下：..........

e2e:(端对端，自动测试)；

assets:(存放静态资源，如：图片)；

environments:();

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  private products:Array<Product>;

  constructor() {
  }

  ngOnInit() {
    let a = this.products = [//视频中this.products = [{}]报错
      new Product(1, '商品标题1', 1.99, 3.5, '第一个商品', ['电子', '网购']),
      new Product(2, '商品标题2', 1.99, 3.5, '第一个商品', ['电子', '网购']),
      new Product(3, '商品标题3', 1.99, 3.5, '第一个商品', ['电子', '网购']),
      new Product(4, '商品标题4', 1.99, 3.5, '第一个商品', ['电子', '网购']),
      new Product(5, '商品标题5', 1.99, 3.5, '第一个商品', ['电子', '网购']),
      new Product(6, '商品标题6', 1.99, 3.5, '第一个商品', ['电子', '网购'])
    ];
    a.push(new Product(6, '商品标题6', 1.99, 3.5, '第一个商品', ['电子', '网购']))
  }

}
export class Product {
  constructor(public id:number,
              public title:string,
              public price:number,
              public rating:number,
              public desc:string,
              public categories:Array<string>) {
  }
}

.......................

有路由得项目：ng new router --routing

新建文件报错：npm install @angular-devkit/core

.........................

ng g component xxx(就会生成模块组件：xxx.component.css/html/.spec.ts)，app.module.ts会随之更新

5，cnpm install @types/jqurey --save-dev(引入的jq使用的时候会报错，所以要安装types)

6，<li *ngFor="let message of mailService.messages; index as i;">（我们使用 let item of items; 语法迭代数组中的每一项，另外我们使用 index as i 用来访问数组中每一项的索引值，必须是双引号）

angular路由

import { NgModule } from '@angular/core';  
import { Routes, RouterModule } from '@angular/router';  
import { HomeComponent } from './home/home.component';  
import { ProductComponent } from './product/product.component';  
import { Code404Component } from './code404/code404.component';  
 
//Routes：这里是根路由 
const routes: Routes = [  
 //path：指路由的路径。component：指路由的目标组件 
  { path:'' , component:HomeComponent},  
  { path:'product' , component:ProductComponent},   
 
 //这里配置的是一个页面不存在的路由 
  { path:'**' , component:Code404Component},  
];  
 
@NgModule({  
  imports: [RouterModule.forRoot(routes)],  
  exports: [RouterModule]  
})  
export class AppRoutingModule {  
  constructor(){  
 
  }  
 }  

product.component.html

3.
<h4><a [routerLink]="['/product',product.title]" >{{product.title}}</a></h4>

product-detail.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {

  productTitle:string;

  constructor(private routeInfo:ActivatedRoute) { }

  ngOnInit() {
    this.productTitle = this.routeInfo.snapshot.params["productTitle"]
  }

①,当path:' ',redirectTo意思是重定向路由,也就是一进来就显示重定向的路由地址'/home'.

②,path:'**',意识是找不到所指的路由时候显示的内容

插座的指定于路由的区分:辅助路由

@input 的用法:

@Input是用来定义模块的输入的，用来让父模块往子模块传递内容：

父级的Html,<app-star>是组件
<app-stars [rating]="product.rating"></app-stars>
组件的html:
{{rating}}星
组件的js:
@Input()
  private rating:number=0;

<!--路由切换位置
将来通过路由显示的组件都会在该标签下方
-->
<router-outlet></router-outlet>

CSS类绑定

1,会替换原来的class.

2,是否添加一个special的类.

3,添加多个样式.

样式绑定

html绑定

错误的绑定方式:

正确的:

双向绑定1:[(ngModel)]

双向绑定2:

双向绑定报错原因:

解决方案:

管道

自定义管道:

会自动添加:

列子:

Html:
<p>自己写的管道{{size | multiple:2}}</p>
ts:
size:number = 7;

[formControl]

formControl 的监听与广播

两种监听方式

1. control.valueChanges.subscribe(v)  
2. control.registerOnChange((value, emitViewToModelChange)

....生命周期钩子

1,ngOnChanges(子组件)监听input输入

cmd命令：

1，tracert 是一个简单的网络诊断工具，可以列出分组经过的路由节点，以及它在IP 网络中每一跳的延迟。（这里的延迟是指：分组从信息源发送到目的地所需的时间，延迟也分为许多的种类——传播延迟、传输延迟、处理延迟、排队延迟等，是大多数网站性能的瓶颈之一）

2，cls：清除所有