zoukankan      html  css  js  c++  java
  • Angular6 基础(数据绑定、生命周期、父子组件通讯、响应式编程)

    Angular相比于vue来说,更像一个完整的框架,本身就集成了很多模块,如路由,HTTP,服务等,而vue是需要另外引入比如(vuex,axios等)。Angular引入了依赖注入、单元测试、类等后端概念,结合TS开发,加入类型管理机制,使前端代码也能严谨化,结构化。比起vue,angular更加适用于大型项目的开发与维护。

    1、项目构建

    // 属于全局安装,如果之前装过了,就不用多次执行该命令了~
    npm install -g @angular/cli
    
    // 新建项目(routiong表示加入路由)
    ng new my-app --routing
    
    // 进入项目
    cd my-app
    
    // 安装插件
    npm install (这里之前使用cnpm install 会卡在95%的地方)
    
    // 启动项目
    ng serve
    
    // 设置不同的端口(默认端口4200)
    ng serve --port 5001
    

    2、绑定

    属性绑定

    • DOM属性:当前值[property]="value",可变,优先使用;可以使用插值表达式双花括号替换
    <!-- 模板代码 -->
    <h4>插值表达式</h4>
    <img src="{{imgUrl}}" alt="">
    
    <h4>DOM属性绑定</h4>
    <img [src]="imgUrl" alt="">
    
    // ts代码
    export class BindComponent implements OnInit {
      imgUrl: string = "http://via.placeholder.com/300x100"
    }
    

    • HTML绑定:初始值[attr.Attribute]="value",不可变,有的HTML属性没有对应的DOM属性,比如colspan,当没有DON属性的时候可使用;

    • CSS类绑定:全替换[class]="classValue",部分替换[class.className]="classValue"

    <h4>class属性全绑定</h4>
    <div [class]="allClass">黑玛鱼</div>
    
    <h4>class属性部分绑定</h4>
    <div class="aa" [class.bb]="bbValue">黑玛鱼</div>
    
    .aa {color: red;}
    .bb {font-weight: bold;}
    .cc {font-size: 50px;}
    
      // 字符串类型
      allClass: string = 'aa bb cc';
      // 布尔类型
      bbValue: boolean = true;
    

    指令绑定

    • ngFor:循环指令
    <h4>ngFor</h4>
    <ul>
      <li *ngFor="let item of list;let i = index">
        第{{i+1}}条:{{item}}
      </li>
    </ul>
    
      // 数组类型
      list: string[] = ['我的前半生','精彩绝伦','我的后半生','依然绚烂']
    

    • ngIf:是否渲染dom元素
    <h4>ngIf</h4>
    <div>
      <span *ngIf="show">我是显式的</span>
      <span *ngIf="!show">我是隐式的</span>
    </div>
    
     // 布尔类型
      show:boolean = true;
    

    • ngClass:多类名显示
    <h4>ngClass</h4>
    <div  class="aa" [ngClass]="{bb: bbValue}">Angular指令</div>
    

    • 事件绑定
    <h4>事件绑定</h4>
    <button (click)="todoClick()">点我</button>
    
        // 事件
        todoClick(){
        alert('点我干嘛?')
        }
    

    双向绑定

    • [(ngModel)]:常用于表单组件
    <h4>双向绑定</h4>
    <input type="text" [(ngModel)]="name">
    <span>{{name}}</span>
    

    这里注意,需要在app.module.ts引入表单模块FormsModule

    管道

    管道(过滤):负责将原始值转成显示值

    名称 效果
    date 日期的转换:date:'yyyy-MM-dd HH:mm:ss'
    number 数字的转换:number:'2.1-4',保留2位整数,最少1个,最多4个
    async 异步流
    自定义 ng g pipe ...
    <h4>管道</h4>
    <span>今天是:{{today | date:"yyyy-MM-dd"}}</span>
    
      today: object = new Date()
    

    投影

    相当于vue的插槽,在ng中使用ng-content指令

    • 单个投影
    <!-- 父组件模板 -->
    <app-child>
        <span>
          两个人在一起 进步快的那个人总是会甩掉原地踏步的那个人 因为人的本能都是希望更多地探求生命生活的外延和内涵
        </span>
    </app-child>
    
    <!-- app-child组件模板 -->
    <h4>单个投影</h4>
    <ng-content></ng-content>
    

    • 多个投影
      使用类class命名,使用select定位
    <!-- 父组件模板 -->
    <app-child>
        <div class="ask">“下次见到她,你会怎么做?”</div>
        <div class="answer">“打个招呼,或者,带她看大海”</div>
    </app-child>
    
    <!-- app-solt组件模板 -->
    <h4>多个投影</h4>
    朋友问:<ng-content select=".ask"></ng-content>
    他说:<ng-content select=".answer"></ng-content>
    

    3、生命周期

    方法 作用
    ngOnChanges 父组件在初始化或者在修改子组件的输入属性时被调用。引用类型改变,不触发,初始化输入属性
    ngDoCheck 数变更检测(zone.js) 发生的时候被调用,很频繁的被调用,只要视图有变化都会触发
    ngAfterViewInit 模板初始化时调用(一次)
    ngAfterViewChecked 模板变化检测
    ngAfterContentInit 插槽值初始化时调用(一次)
    ngAfterContentChecked 对插槽内容的初始化和变更检测,在视图初始化之前调用。此时可以更改值
    ngDestory 路由切换的时候,前一个组件销毁,后一个组件创建

    4、父子组件通讯

    组件创建:ng直接使用 ng g component 的命令创建组件,会自动生成组件所需的文件,方便快捷。

    // 父组件
    ng g component parent
    // 子组件
    ng g component parent/child
    

    父->子(@Input())

    使用 @Input() 让子组件知道哪个是输入的属性,对应vue中的props。

    <h4>我是父组件</h4>
    <input type="text" [(ngModel)]="tellchild">
    <app-child [message]="tellchild"></app-child>
    
    <h4>我是子组件</h4>
    <div>父组件传来的数据是:{{message}}</div>
    
    // 子组件ts,告诉组件,message是父组件传进来的
    @Input() public message: string;
    

    子->父 (@Output())

    依赖EventEmitter事件发射器,将信息发射emit给子组件

    <h4>我是子组件</h4>
    <div>父组件传来的数据是:{{message}}</div>
    <input type="text" [formControl]="childmessage">
    
    // 使用FormControl对象,响应式表单需要引入ReactiveFormsModule模块
      childmessage: FormControl = new FormControl();
    
      // 输出属性,需要定义成事件
      @Output() childtellEvent: EventEmitter<any> = new EventEmitter();
    
      ngOnInit() {
        this.childmessage.valueChanges.subscribe(msg => {
          // 通过emit将信息发射出去
          this.childtellEvent.emit(msg);
        })
      }
    
    <h4>我是父组件</h4>
    <input type="text" [(ngModel)]="tellchild">
    <div>子组件传来的数据是:{{childmessage}}</div>
    <!-- 事件绑定获取数据 -->
    <app-child [message]="tellchild" (childtellEvent)="tellResult($event)"></app-child>
    

    5、响应式编程

    • 可观察对象
      Angular集成了 参考:Rxjs,它使用 Observable 对象来创建流,主要是用于监听一组值或者事件的集合
    // 创建流
    // 值的创建
    Observable.of([1,2,3,4]);
    // 事件的创建
    var button = document.querySelector('button');
    Observable.fromEvent(button,'click')
    
    • 观察者
      不是对象,而是一个回调函数集合,它知道如何监听被 Observable 发送的值。通过订阅subscribe的方式观察可观察对象,取消订阅unsubscribe()
    // 订阅流
    Observable.from([1,2,3,4]).map(item =>{
        item * item
    }).subscribe(
        // next检测
        res => console.log(res),
    
        // error检测
        err => console.log(err),
    
        // complete检测
        () => console.log('it`s over')
    )
    
  • 相关阅读:
    各种blog尝试后,发现wordpress适用起来最方便
    索引器(C# 编程指南)
    vue3 父子组件之间的传值
    vue3 + vite + ts 搭建项目
    vue3中使用全局变量
    用JSONKit库解析json文件
    程序内部让用户直接上appstore评价游戏的链接地址以及跳转方法
    常见错误:Apple MachO Linker Error
    常见错误:多线程界面元素显示错误
    常见错误:Undefined symbols for architecture i386
  • 原文地址:https://www.cnblogs.com/webhmy/p/9435117.html
Copyright © 2011-2022 走看看