angular 常用特性 创建组件 组件传值 创建模块 json serve.的使用 路由

https://angular.cn/start

拿到事件对象  $event

Angular 模板语法的五个常用特性

• *ngFor

• *ngIf

• 插值 {{}}

• 属性绑定 []

• 事件绑定 ()

• 启动:ng serve --open

双向数据绑定

[(ngModel)]="msg">//注意区分大小写

import { FormsModule } from "@angular/forms";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],

 

 

angular语言服务

让模块有以下功能

1.自动完成   ()

2.错误提示

3.给出提示

4.内部导航

 

属性型指令   [ngClass]="classList"

true为添加类  false为移除类

 

 显示与隐藏  

 

ngfor

 

提高性能

普通数组没有性能问题   对象数组才有

 

 

todolist代办清单

  
  添加


{{item.name}}

x

 

 

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  // template:' ,
{{msg}}
',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  lists=[
    {id:1, name:"吃饭", done:false},
    {id:2, name:"睡觉", done:false},
    {id:3, name:"学习angular", done:false},
    {id:4, name:"学习typescript", done:false}
  ]
  // 提高性能
  tackById(index,color){
return color
  }
  // 添加数据
  todoName="";
  addtodo(){
    // 判断非空数据
    // if(this.todoName.length==0){
    //   return
    // }
if(this.todoName.trim()==""){
  return
}
let id
if(this.lists.length==0){
id=1
}else{
  id=this.lists[this.lists.length-1].id+"1"    //在最后一项的数据id+1
}
    // 添加到数组中  拿到数组中的数据使用(双向数据绑定) 添加到数组中
    this.lists.push(
      {id:4,name:this.todoName,done:true}
    
      
    )
    this.todoName=""

  }
  dele(e,id){
      e.preventDefault()
      this.lists= this.lists.filter(item =>item.id!==id)  //非布尔类型
      
  }
  zhuangdi(id){
const zhuangdai=this.lists.find(item=>item.id===id)
console.log(zhuangdai);

zhuangdai.done=!zhuangdai.done  //=!用在布尔类型

  }
}
// 不会:1.获取双向数据绑定
// 表单input 需要引入forms
// 状态字段不会

 

组件和组件通讯

创建组件   

ng g c 组件名

父到子组件通信通过  子组件@input skill//属性名  暴露公开属性,

第一步  公开属性

 

第二步  展示数据

第四步传递属性

子组件传值

 

 

创建模块

ng g m 模块名

创建组件

ng g c 模块名/小组件名

 

自组件向父组件传值   todoheader部分

todolist部分

 

变量声明的时候注解  但是如果它有值的话就不用注解  如 let a =3

泛型

 

接口

服务

ng g s  文件夹/服务名称

第一种注册方法

providedIn 是提供商      providedIn: 'root    根级提供商,所有组件都可以使用

第二种注册方法

4

 

第三种注册方法

注册完,使用方法

 

使用服务  导入-声明

 

  json serve.的使用

 

 

 

路由