angular学习知识点

页面对应的js部分开头代码

import { Component } from '@angular/core' ;
@Component( { 
        selector : "页面名称如xxxx不带后缀",
        templateUrl : "放页面路径，列如 和本页面同级的html页面，就是./文件名.html" ,
        template : "可直接写html代码，如<h1>xx</h1> 但是这种不可以换行。不可和templateUrl重复出现" ,
        template : ` 这种的可以换行，注意用的是 反引号 引起来的 就是esc下面那个键。不可以和templateUrl重复出现。例子如
                    <h1>xs</h1>
                        <p>hehe</p>
                ` ,
        styleUrls : [ " 放入css路径，列如 和本页面同级的css页面，就是./文件名.css " ] , 
        styles : [ " 可以直接写css样式，是否能换行不知道，不可与styleUrls重复出现。例如，h1{ font-weight : normal ; } " ]
     } )

注意 ``反引号，键盘esc下面那个

js中

export class XxxXxxComponent { 
    message = ' Hello, World! ' ;
    sayHelloId= 1 ;
    fontColor = 'red' ;
 }
html页面中
<p> { { message } } </p>

可以实现动态赋值

也可以 
<p [ id ] = " sayHelloId " [ style.color ] = " fontColor ">
xxcxcx
</p>

这样动态设置，p标签的id和字体颜色。

也可以 
<button [ disabled ] = "canClick" ( click ) = " sayMessage() ">按钮</button>
js中
export class XxxXxxComponent { 
    canClick= false ;
    
    sayMessage ( ) { 
        alert ( this.message ) ;
     }
 }

<p contenteditable="true/false"></p>    contenteditable该属性表示文字是否可以被编辑。true可以，false不可以

ngif            angular的页面if语句
*ngif的*是语法糖，就是 ng-template
<div *ngif = " show ; else elseBlock">xx1</div>    
<ng-template #elseBlock>xxxxxx2 </ng-template>
意思是如果show为true那就是xx1不是那就是xx2
还有   #thenBlock    有这个，那就是then里面是true的值
    #elseBlock    else里还是else的值
如
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>xxxx1</ng-template>
<ng-template #elseBlock>xxxx2</ng-template>

还有一个本地存值的没太看懂，，这个value意思是，不是在js后台中命名的？是域里的？

<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>Content to render when value is null.</ng-template>

{{ 好像这里支持三元运算符即     A？ a：b    }}

js中有一个变量提升的机制，也就是你在js的函数内定义一个变量时，该变量定义会提升到函数内最顶部定义该变量。此时该变量仅仅定义，未赋值。
然后正常走流程，走到正常定义变量的位置时，给该变量赋值。
但如果该变量是 使用let声明的，因为let没有提升机制。所以只会正常执行。 如果let的变量是全局变量，那么因为js的机制，
局部变量和全局变量重名的时候，会覆盖全局变量，所以，如果在let之前调用该函数，那么只会报错，而不是像var一样返回undefined

angular坑，，
{ { xxx|xxx } }        xx | json    是将xx格式化为标准的json字符串
            xx | uppercase/lowercase        是将字符串大写或小写
            数字1 | number : 数字2        格式化数字，位数字加上千位分隔符，前面的数字1是你要转化的数字，后面的数字2是保留几位小数
            对象数组 | orderby : "数组中的某一个属性"
            如    arr=[{name:"aa",age:20},{name:"ab",age:19},]
            arr | orderby : "name"    那么就是已name为首先规则，先按照name排序，name的第一个字符相同，就比较下一个字符。
            可以设置第二个参数，确定排序方式是升序还是降序，默认false，表示升序。true为降序
            也可以再orderby属性前加符号-  也表示降序        
            如 arr | orderby : ['name','-age'] : true        第一个参数是【xxx】    第二个参数是true

    angular中 | 因该就是代表过滤器，。因该，不确定

自定义过滤器    如
 <!-- 自定义过滤器，实现在字符串前添加图标 ☺ -->
    <div>{{"哈哈" | laugh}}</div>

    <!-- 自定义过滤器，实现字符串翻转，再根据用户设置，选择是否转换成大写 -->
    <div>{{"abcd" | reverse:true}}</div>

    <!--自定义过滤器，实现字符串翻转，再根据用户设置，选择是否转换成大写,并在字符串前添加用户指定的修饰符  -->
    <div>{{"hiiuio" | reverseAndDes:true:'√'}}</div>

    <!-- 多个过滤器一起使用 -->
    {{"avxb" | reverse | laugh }}
    <script>

        var app = angular.module('app',[]);
        //不带参数的过滤器
        app.filter("laugh",function(){
            return function(input){
                return "☺"+input;
            }
        });

        //带参数的过滤器
        app.filter("reverse",function(){
            return function(input,flag){
                var s = '';
                //abc
                for (var i = 0; i < input.length; i++) {
                    s = input[i]+s;
                }
                // 需要转换咸大写
                if (flag) {
                    s = s.toUpperCase();
                }

                return s;
            }
        });
        //带多个参数的过滤器
        app.filter("reverseAndDes",function(){
            return function(input,flag,des){
                var s = '';
                //abc
                for (var i = 0; i < input.length; i++) {
                    s = input[i]+s;
                }
                // 需要转换咸大写
                if (flag) {
                    s = s.toUpperCase();
                }

                return des+s;
            }
        })
    </script>

input 是 | 左边的值，代表传入的要过滤的数据， flag代表的是第二个数据，true还是false那个，，des代表第三个数据，
也就是        传入的input | 过滤条件函数名 ：传入的第二个参数 ：传入的第三个参数

多个过滤器，    传入的 | 过滤方法一 | 过滤方法二

angular 文档中      userObservable | async as usre    代表的意思是，userObservable 是一个Observale对象
            通过AsyncPope将最新的值赋值给变量user，    
            一般都是user$ | async    通常约定以 $ 结尾的变量来表示这是一个Observable的数据源

使用HttpClient获得的数据都是Observable类型的，使用AsyncPipe就可以不再需要subscribe中来进行数据赋值了，从而使得代码更简洁。
这句话不是太懂，这几个类型要研究下。

*ngFor      for循环，
例子
<li *ngFor ="let user of users ; index as i ; ">xxx</li>
这里面我理解的是，user是users集合中的value，遍历下标 也就是i。遍历取user。
如果说有个值 A=1想要循环加，10次， 那么因该就是，
<li *ngFor = " let A of 10 ; index as i "> 但不一定对。

给导出值指定一个局部变量别名 在后面加 如  first as isFirst  

trackBy 属性，自定义返回 对于 原对象数组的跟踪结果。原对象数组发生变化时触发。
first 第一个元素 last 最后一个元素

禁用框是由透明度的，发现文字颜色一致，但是颜色还是对不上，找找透明度，看看是不是透明度的问题。

函数名 （变量名：变量类型）

依赖注入，        这种文件因该是，xxx.service.ts            正常的是， xxx.component.ts
import { js的export名字 } from  ' 路径（注意是 .service的文件哦，） ' ；
底下定义一个该类的变量        constructorr（private 变量类名：导入的类名代表是这个类型的类）
                如        constructor （private log ：Logger） 那之后调用就是，log.xxx方法。

@Injectable({
  providedIn: 'root',
})                依赖注入必须要有的？

ngClass    ngStyle    ngModel    class可以单独设置class， style可以单独设置css    model是表单元素的属性，如input加上 然后可以捕捉改变什么的？？不太明白

*ngSwitch    *ngSwitchCase    *ngSwitchDefault        正常switch用法， switch写判断元素， case是条件， default是都不是的情况。

angular 事件处理程序，        @HostListener（ ' mouseenter ' ）        暂缓，做疑问处理？

=>     就相当于 function（）{}
一个参数， a=>{ console.log(a);};
多个参数,    (a,b)=>a+b                都可以

相对其它语言来说，相当于js中的lamada表达式

as 表示 断言            ，断言表示 判断真假，如果假会程序报错终止，如果真则继续。
当程序执行到断言的位置时，对应的断言应该为真。若断言不为真时，程序会中止执行，并给出错误信息。
如 a as string    则a是string类型则真，继续执行，不是则为假，报错

？ 表示可选的属性，如
a ？：string；        其实就是     a：string | undefined ;
使用这个属性时，要么这个属性名不存在，要么必须符合属性的类型定义。

angular 中的  this.route.queryParams.subscribe（ params = >{  } ）;
属于是，组件接收。

列如 : 

import { Router } from '@angular/router';
 constructor( private router: Router ) { }
 
 this.router.navigate(['system/news（页面B的路由）'],{
      queryParams: {
        name（随意起）: record.flowName（页面A中的数据）,
        id（随意起）: record.flowMajorKey（页面A中的数据）
      }
});

3、即要传递路由path，又要传递参数，两者结合
A组件到B组件，同时还要传递一个参数
在A组件中：
  this.router.navigate(['allnews/new', id], {
      queryParams: {
        title: this.title
      }
    })
B组件接收：
constructor(private route: ActivatedRoute ) { }

    //传递的是path
    this.route.params.subscribe(params => {
       this.id= params['id']
    });
    //传递的是参数
    this.route.queryParams.subscribe(params => {
      this.title=params.title
    })

传递参数的参数设置。

1.以根路由跳转/login
this.router.navigate(['login']);

2.设置relativeTo相对当前路由跳转，route是ActivatedRoute的实例，使用需要导入ActivatedRoute
this.router.navigate(['login', 1],{relativeTo: route});

3.路由中传参数 /login?name=1
this.router.navigate(['login', 1],{ queryParams: { name: 1 } });

4.preserveQueryParams默认值为false，设为true，保留之前路由中的查询参数/login?name=1 to /home?name=1
this.router.navigate(['home'], { preserveQueryParams: true });

5.路由中锚点跳转 /home#top
this.router.navigate(['home'],{ fragment: 'top' });

6.preserveFragment默认为false，设为true，保留之前路由中的锚点/home#top to /role#top
this.router.navigate(['/role'], { preserveFragment: true });

7.skipLocationChange默认为false，设为true，路由跳转时浏览器中的url会保持不变，但是传入的参数依然有效
this.router.navigate(['/home'], { skipLocationChange: true });

8.replaceUrl默认为true，设为false，路由不会进行跳转
this.router.navigate(['/home'], { replaceUrl: true });

angular 某个属性        如ngModel    出现的时候可能带着括号代表
如
<input ( ngModel ) = ' name ' />        input------> 组件                    单向        input影响组件，组件不影响input。
<input [ ngModel ] = ' name ' />        组件-------->input                    单向        组件的值变化可以影响input，反过来input不会影响组件
<input ( [ ngModel ] ) = ' name ' />        组件-------->input，input------> 组件        双向        相互影响，一个变另一个也跟着变。

循环创建input框时
<div *ngFor='let item of items;let i=index'>
    <input ([ngModel])='items[i]'/>       //注意这里不能写成<input ([ngModel])='item' />
</div>

angular 封装颜色选择器组件，select-color                      https://blog.csdn.net/weixin_34327761/article/details/88826258

@Input()        值是从父组件传过来的
@Output()        获取值以后将值传给父组件。需调用父组件方法，将数据传递出去。

compositionstart和compositionend
当用户使用拼音输入法开始输入汉字时，compositionstart事件就会被触发。当文本段落的组成完成或取消时, compositionend 事件将被触发。

运算符的优先级要注意
从上到下，优先级顺序。

运算符    描述
. [] ()    字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void    一元运算符、返回数据类型、对象创建、未定义值
* / %    乘法、除法、取模
+ - +    加法、减法、字符串连接
<< >> >>>    移位
< <= > >= instanceof    小于、小于等于、大于、大于等于、instanceof
== != === !==    等于、不等于、严格相等、非严格相等
&    按位与
^    按位异或
|    按位或
&&    逻辑与
||    逻辑或
?:    条件
= oP=    赋值、运算赋值
,    多重求值