Angular_基础

Angular_基础

创建组件

ng g //当输入ng g时 会提示我们需要创建的内容

ng g component components/news //此时会创建组件 并会在src、app文件下面生成 components文件夹和news组件并自动生成相应的代码

如果我们通过上述命令行进行创建的组件 系统会自动会给我们在app.module.ts中引入该组件否则我们就得自己引入，引入之后才能正常使用

引入组件

箭头所指的地方就是组件名，我们只需像下面那样写我们就可以在其它组件中使用其它组价了

属性声明，绑定html等

ts中
  //属性声明的几种方式 
  //public 默认可以在本类中使用也可以在外类中使用 
  msg:string = '我是msg数据';
  public msg2:string = "haha";
  //protected 受保护类型 可以在当前类也可以在子类中进行使用
  protected name:string = "lbj";
  //private 私有属性只能在当前类中使用 不能在其它使用
  private age:number = 18;

  // 只定义值然后到构造函数中去赋值
  private value:number = 10;
  public contentHtml:string = `<h2>我是一个h2标签</h2>`;
html中
  <!-- 动态绑定属性 -->
<span>{{msg}}</span>

<div title="我是静态属性">
瞄我1
</div>
<!-- 绑定动态属性  使用[]-->
<div [title]="msg">
瞄我2
</div>
<!-- 在angular里面绑定html -->
<div [innerHTML]='contentHtml'>
</div>
<!-- angular里面可以做简单的运算 -->
1+2 = {{1+2}};

ngFor循环

  // 定义数组
  public arr:any[] = ["第一条新闻","第二条新闻","第三条新闻"];
  //定义数组的语法
  public arr2:Array<number> = [];//此时数组里只能是数字
  public arr3:Array<string> = [];//此时数组里只能是字符串
  // 定义复杂数组进行
  public list:any[] = [
    {
      name:"勒布朗",
      arr:[
        {
          point:24,
          session:1
        },
        {
          point:36,
          session:2
        },
        {
          point:66,
          session:3
        },

      ],
    },
    {
      name:"安东尼",
      arr:[
        {
          point:18,
          session:1
        },
        {
          point:26,
          session:2
        },
        {
          point:45,
          session:3
        },

      ],
    }
  ];

<!-- 在angular中循环 可以在angular中安装 angular Snippets插件此时只需打个ng就会有提示-->
<ol>
    <li *ngFor="let item of arr">
        {{item}}
    </li>
</ol>

<ul>
    <li *ngFor="let item of list">
        {{item.name}}
        <ol>
            <li *ngFor="let data of item.arr;let key = index">
                `第{{data.session}}次得分{{data.point}},我是索引{{key}}`
            </li>
        </ol>
    </li>
</ul>

引入图片

  public imgUrl = 'https://img0.baidu.com/it/u=3119542616,1165410720&fm=26&fmt=auto';//图片地址 模仿后台获取

<!-- 引入图片 在angular中不需要../这些只需直接写路径即行 -->
<img src="assets/img.jpg" alt="">
<!-- 动态地址 -->
<img [src]="imgUrl" alt="">

ngSwitch的使用，ngClass

public status:number = 0//可根据状态switch显示不同内容
<!-- ngSwitch的使用 -->
<div [ngSwitch]="status">
    <div *ngSwitchCase="1">已支付</div>
    <div *ngSwitchCase="2">未支付</div>
    <div *ngSwitchCase="3">代办</div>
    <div *ngSwitchCase="4">不代办</div>
    <div *ngSwitchDefault>默认信息</div>
</div>
<!-- ngClass的使用 -->
<span [ngClass]="{red: true}">ngClass的使用</span><!-- 直接使用布尔值的情况-->
<span [ngClass]="{orange: flag,blue:!flag}">另外一个</span><!-- 通过属性值来决定是否使用这个类名 -->
<ol>
    <li *ngFor="let item of arr;let key=index;" [ngClass]="{red: key===0,blue:key===1,orange:key===2}">
        {{item}}
    </li>
</ol><!-- 通过key配合循环来使用 -->

ngStyle的使用

<!-- ngStyle的使用 -->
<!-- 普通style使用 -->
<p style="color: pink;">我是一个p标签</p>
<!-- ngStyle -->
<p [ngStyle]="{color:'skyblue'}">我是一个p标签</p><!--这里注意一点因为颜色是字符串所以必须加''-->
<p [ngStyle]="{color: colorStyle}">我是一个p标签内</p><!--也可以是属性通过属性定义颜色-->

管道

<!-- 管道的使用 -->
<span>{{lowerString | lowercase}}</span><!--此时将所有字母转换成大写字母-->
<!-- 
date：根据本地环境中的规则格式化日期值。
uppercase：把文本全部转换成大写。
lowercase ：把文本全部转换成小写。
currency ：把数字转换成货币字符串，根据本地环境中的规则进行格式化。
decimal：把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。
percent ：把数字转换成百分比字符串，根据本地环境中的规则进行格式化。 -->

事件

<!-- 事件 -->
<button (click)='getData($event)'>我是一个按钮</button>
<!-- 键盘事件 -->
<button (keydown)='getData($event)'></button>

双向数据绑定

  public ngM:string = "lbj";
  <!-- 双向数据绑定 -->
<input type="text" [(ngModel)]="ngM"><span>{{ngM}}</span>

使用双向绑定实现基本表单

<div>
    <span>姓名：</span><input type="text" [(ngModel)]="formData.name">
    <div>
        <span>性别：</span>
        <input type="radio" [(ngModel)]="formData.sex" value="1" id="sex1"><label for="sex1">男</label>
        <input type="radio" [(ngModel)]="formData.sex" value="2" id="sex2"><label for="sex2">女</label><!--只有当id和label里面的for一样时此时我们点击汉字也能进行选中-->
    </div>
    <div>
        <span>城市：</span>
        <select [(ngModel)]="formData.city">
            <option [value]="item" *ngFor="let item of cityList">{{item}}</option>
        </select>
    </div>
    <div>
        <span>爱好：</span>
        <span *ngFor="let item of formData.hobby;let key=index">
            <input type="checkbox" [value]="item.flag" [id]="'check'+key" [(ngModel)]="item.flag"/> <label [for]="'check'+key">{{item.name}}</label>
        </span>
    </div>
</div>

<button (click)=getFormData()>获取表单内容</button>

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
  public formData:any = {
    name:'',
    sex:'1',
    city:'都江堰',
    hobby : [
      {name:"滑雪",flag:false},
      {name:"打游戏",flag:false},
      {name:"骑摩托",flag:true},
      {name:"318",flag:true},
      {name:"做咖啡面包",flag:true},
    ],
  };
  public cityList:string[] = [
    "北京",
    "上海",
    "广州",
    "都江堰"
  ];

  constructor() { }
  getFormData():void{
    console.log(this.formData);
  };
  ngOnInit(): void {
  };

}