Angular学习笔记（入门）

Angular设计模式

先整体布局，后补充详细。

Angular CLI常用命令

启动

ng serve --host 0.0.0.0

新建项目

ng new

创建控件

ng g component my-new-component

创建服务

ng g service shared/product

Angular学习

For循环

使用Angular的for循环控制控件
html

<div *ngFor="let product of products">
</div>

private products:Array<Product>;

ngOnInit(){
    this.products = [
        new Product(1,"产品说明"),
    ]
}

export class Product{
    Constructor(
        public id:number,
        public title:string,
        public infoarray:Array<string>){
    }
}

从父组件向子组件传值

Input装饰器（子组件中）
ts

@Input()
private rating:number = 0;

在父组件中传值
html

<app-stars [rating]="product.rating"></app-stars>

路由

子路由
保护路由
辅助路由

普通路由

Routes
RouterOutlet
Router
RouterLink
ActivatedRoute

Routes(ts)

{
    path: 'admin', // 注意不能写'/'
    component: AdminComponent, // commind+1自动import
},
{
    path: '',
    compoent: ...,
},
{
    path: '**',
    compoent: Code404Component, // Code404通配符路由，要放在路由的最后
},

RouterOutlet(html)

<router-outlet></router-outlet>

RouterLink(html)

<a [routerLink]="['/']"></a> <!-- 根路由 -->
<!-- 参数是数组而不是字符串，是因为传递路由时可以传递参数 -->
<a [routerLink]="['./product']"></a> <!-- 子路由 -->

通过Router对象导航
html

<input type="button" value="商品详情" (click)="toProductDetails()"> <!-- 事件绑定 -->

// class
    constructer(private router: Router){ // 依赖注入

    }
    
    toProductDetails() {
        this.router.navigate(['/product']);
    }

路由传参

在查询参数中传参

传入（html）

<a [routerLink]="['/product'] [queryParams]="{id:1}"">商品详情</a>

获取参数(ts)

private productId:number;

// 构造函数中注入依赖
constructor(private rpiteInfo:ActivatedRoute){}

ngOnInit(){
    this.productId = this.routeInfo.snapshort.queryParams["id"];
}

在路由路径中传参

修改Path(ts)

{
    path: 'product/:id',
    component: ProductCommponent,
},

传入（html）

<a [routerLink]="['/product',1]">商品详情</a>

获取参数(ts)

private productId:number;

// 构造函数中注入依赖
constructor(private rpiteInfo:ActivatedRoute){}

ngOnInit(){
    this.productId = this.routeInfo.snapshort.Params["id"];
}

组件在创建时被第一次调用，当链接改变但在同一组件内路由时，组件不会被再次创建，OnInit方法也不会被再次调用。

参数快照

ngOnInit(){
    this.productId = this.routeInfo.snapshort.Params["id"];
}

参数订阅

使用参数订阅，使参数的数值在变化时，传递的数值也随之变化。

ngOnInit(){
    this.routeInfo.params.subscribe((params: Params) => this.productId = params["id"]);
}

重定向路由

Routes(ts)

{
    path: '',
    redirectTo: '/home',
    pathMatch: 'full',
},
{
    path: 'home',
    component: HomeComponent,
},

子路由

Routes(ts)

{
    path: 'home',
    component: HomeComponent,
    children:[
        {path:'', component: ProductDescComponent},
    ]
},

子路由链接

<a [routerLink]="['./']">商品描述</a>

辅助路由

在模板中定义多个插座

路由守卫

CanActivate：处理导航到某路由的情况
guard/login.guard.ts

import {CanActivate} from
export class LoginGuard implements CanActivate {
    canActivate() {
     return boolean;
    }
}

Router

{
    path: 'seller/:id',
    component: SellerInfoComponent,
    canActivate: [LoginGuard],
},

...

@NgModule({
    providers: [LoginGuard],
})

CanDeactivate：处理充当前路由离开的情况
guard/unsaved.guard.ts

import {CanDeactivate} from
export class UnsavedGuard implements CanDeactivate<ProductComponent> {
    canDeactivate(component: ProductComponent) {
     return window.confirm("你还没有保存，确定要踢开吗？");
    }
}

Resolve：在路由激活之前获取数据

依赖注入

提供器和注入器

// @Component 中或者 @NgModule
providers:[{
    provide: ProductService, useClass: AnotherProductService
}],

// 简写
providers:[ProductService],

注入规则：
1.提供器声明在模块中时，是对所有组件可见的，所有组件都可以注入；
2.提供器声明在组件中时，是对组件及子组件可见的；
3.模块中和组件中有相同token时获取组件中的；
4.优先将提供器声明在模块中。

@Injectable() // 装饰器表示可以在此服务的构造函数中注入其他服务
export class ProductService {

}

工厂方法提供器 4-4

数据绑定

事件绑定

<a (click)="toProductDetails()">
</a>

<input (input)="onInputEvent($event)">

1519440618684_3.png

DOM属性绑定

<h1>{{productTitle}}<h1>

<a [src]="imgurl">
</a>

<img src="{{imgurl}}">

<input value="Tom" (input)="ddoOnInput($event)">

第一行为dom属性，第二行为html属性。html属性表示初始值，dom属性表示当前值。

1519441219518_4.png

disabled的html值对表示无影响，但是可以通过改变dom值来更改可用不可用。

<button disabled>点我</button>

HTML属性绑定

1519442366911_5.png

1519442386485_6.png

1519442457615_7.png

双向绑定

<input [(ngModel)]="name">

匿名函数？

响应式编程

对流进行处理

管道

格式化模板输出

与服务器通讯

HTTP通讯

// in class

dataSource:Observable<any>;

products:Array<any> = [];

constructor(private http: Http) {
    this.dataSource = this.http.get('/api/products')
        .map((res) => res.json());
}

ngOnInit() {
    this.dataSource.subscribe(
        (data) => this.products = data
    );
}

/proxy.conf.json

{
    "/api":{
        "target":"http:localhost:8000"
    }
}

/package.json

"start":"ng serve --proxy-config proxy.conf.json",

使用管道
ts

// in class

products:Observable<any>;

constructor(private http: Http) {
    this.products = this.http.get('/api/products')
        .map((res) => res.json());
}

ngOnInit() {
}

html

<ul>
    <li *ngFor="let product of products | async">
        {{product.title}}
    </li>
</ul>

请求头
ts

// in class

products:Observable<any>;

constructor(private http: Http) {
    let myHeaders:Headers = new Headers();
    myHeaders.append("Authorization", "Basic 123456");
    this.products = this.http.get('/api/products', {headers: myHeaders})
        .map((res) => res.json());
}

ngOnInit() {
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

Angular学习笔记（入门）