angular知识点

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 一、ngif通过路由控制组件是否显示
• 二、angular基础
• 三. ts 知识点

---

##1.ngif通过路由控制组件是否显示

### 1.1定义变量 path = '';

###1.2获取本地路径

constructor(private httpserves: AxiosServiceService, private router: Router, private location: Location) {

this.router.events.subscribe((val) => {

this.path = this.location.path();

});

}

###1.3在html里判断

<div *ngIf="path != '/hello'"> 内容<div>

##2 angular基础

###插值表达式

src="{{item.img}}"    {{ item.languar }}

###双向绑定

[(ngModel)]="info.username"

###点击事件

(click)="findAll()"

###结构语句for循环

*ngFor="let item of msg; let key = index"

###结构语句if判断

 *ngIf="msg.length > 4"

###路由跳转并传值

##3. 传值 接收

    ###3.1跳转并进行传值

第一种:引入这个NavigationExtras可以更标准一点

    let queryParams: NavigationExtras = {

      queryParams: { 'name': this.item.title }

    }

     注意此时第要传递的参数是放在中括号外面的。

    this.router.navigate(['/second'], queryParams);

 第二种:<a [routerLink]="[ '/second' ]" [queryParams]="{name:item.title}"> 数跳转到第二页</a>

接收

引入  import { ActivatedRoute, Router } from '@angular/router';

name!: string;

 this.route.queryParams.subscribe(params => {

      this.name = params['name'];

    });

###3.2通过路由跳转并传值

    this.router.navigate(['/third/', this.item.lid]);

  }

###接收

 this.route.params.subscribe((data) => {

      this.productId = data["lid"];

   })

#自定义管道

创建管道

ng g pipe pipe/管道名

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

  name: 'myc'

})

export class MultiplePipe implements PipeTransform {

  transform(value: number): unknown {

    return value > 10000 ? (value / 10000).toFixed(2) + '万' : value;

  }

}

# ts 知识点

静态类型分析:

变量名:类型名

类型:

– number string boolean any boolean|number

– Array 数组中都是字符串元素

– string[] 等价上方

– [string, number] 规定数组中两个元素, 分别的类型

自定义对象类型:

interface 类型名{

属性名: 类型名;

属性名: 类型名;

}

###定义变量

sunTitle: any = '';

###定义对象

public info: any = {

username: '',

password: ''

}

###定义数组

 msg = [

    {

      id: '',

      img: '',

      languar: '',

      popularity: '',

      price: '',

      heat: '',

      type: '',

    },

  ];