angular crash course 笔记 (1)

angular的组件是用命令创建的

创建一个组件

• 变量在ts里的class里写

变量在html用{{}}展示，

• 引用组件 直接在引用的地方写标签

1. angular的双向数据绑定
2. 0.html

3. <input matInput id="tipinput" autocomplete="off" [(ngModel)]="searchKey" />    searchKey--{{searchKey}}

   1.ts

4. searchKey:string=''//输入框内容

• 组件间传递数据
  • 定义

• 使用
• 

• 

• 

• 如果要传动态的参数给子组件 加上[]

  <app-obtain-coordinate
    [defaultCoordinate]="data.defaultCoordinate"
  ></app-obtain-coordinate>

并在app-obtain-coordinate中定义input

import { Component, OnInit,Input } from "@angular/core"; 
@Input() defaultCoordinate: number[];

• NG的内联样式
  • ng的命令
  • 
• ng的事件
  • 点击事件
  • 

双击事件是(dblclick) 

有一个l

• 点击事件调的函数

• 事件发射器
  • 发送事件
  • 

• 
• 接受事件

接收自定义emit事件的参数

在接收组件的.html页面

(btnClick)="toggleAddTask($event)" 

在接收组件的.ts文件里

toggleAddTask(data){
  console.log('toggleAddTask: ',data);//你的逻辑
}

• ng的循环
  • 
• ng传递一个对象
  • 
• 用interfacce定义一个变量
  • 

• 

• 通过ng 安装angular的插件包

ng add @fortawesome/angular-fontawesome

在app.module.ts中可以看到

• 使用引入的icon(接上面)

在使用的界面

import{faCoffee}from'@fortawesome/free-solid-svg-icons';

这个时候试 ng add 报错 可以直接用cdn