Angular零碎知识点-持续补充

一 . Angular中按回车键触发处理input输入数据的函数方法。

<input  placeholder="" [(ngModel)]="inputName" (change)="reName()" />  //按下回车后会执行reName函数。

 

二. 　Angular动态更改当前元素的style样式或class类名。

<div [ngClass]="{'analysis-float':!fixed,'analysis-fixed':fixed}" [style.width.px]="width"></div>
/*控制多个样式的显示与否analysis-float为样式类名，fixed根据需要为true或false。此属性会一直调用，
  如你在该元素上添加style内联样式与ngClass中样式类属性有重合，ngClass会一直调用导致覆盖内联style样式。*/

<div [class.name]="vis"></div>
//name为你要控制的样式名，vis为真或假.

<div [ngStyle]="{'color':vis?'red':'black'}"></div>
//和ngClass一样也会重复调用。

<div [style.width.px]="200"></div>
//设置style的宽度

 

三.   Angular的路由传参的两种方式。

   1  .动态路由传值，如example/:id，看步骤：

 1.1 在模块对应的routing.module.ts中配置相应路由 
 { path: 'example/:id', component: ExampleComponent}

 1.2 在要使用参数的模块引入ActivatedRoute 
  import { ActivatedRoute } from '@angular/router';

  //构造器注入
  constructor(
    private route: ActivatedRoute,
  ) {

  }
  //调用;注意这种传参用的是params
      //这种可以根据id的值监听id 值的变化。
      this.router.params.subscribe(
      (params: Params) => {
              console.log(params.id);
    );
       //这种是快照，获取到的id值不会再改变，即使你的路由的id发生了改变
       this.route.snapshot.params.id

　　2.query路由传值，如：example?id=1&name=xk;

          两种传递方式

  第一种：
    html文件中
    <a [routerLink]="['/example']" [queryParams]="{id:key,name:xk}">
     </a>

  第二种：
     ts文件中:

     需要先引入router：
     import {  Router } from '@angular/router';

     构造器注入:
       constructor(
        private router: Router,
       ) { }

     使用：
       this.router.navigate(['/example'], {
        queryParams: {
          id: key,
        name: xk
        }
      });
     

　　获取参数: 和第一种获取方式类似，唯一不同之处在于把params改为queryParams。

 

四.  angular优化导入文件路径。

    优化前

import { ExportUtilService } from '../../../core/util/export.service';

　优化后

import { ExportUtilService } from '@core/util/export.service';

　方法：

   打开tsconfig.json,找到paths，添加如下形式的代码

paths:{ 
  "@core/*": [
        "src/app/core/*"
      ],
}

　　

 五.   angular如何让全局使用moment.js不用再每个文件单独导入。

      1.肯定先要有moment.js的包

   npm i moment.js

　　2.打开angular.json文件，找到每个scripts加入如下代码:

    

       加完，重启项目，angular.json才会重新生效。