您的位置: 首页  >  文章  >  数据绑定

数据绑定

分类: 文章 • 2024-02-20 14:13:58
  1. 架构：
           数据绑定
  组件管理模板，    指令数据填充模板，      服务控制组件
        依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
        注入器维护了一个服务实例的容器，存放着以前创建的实例。
数据绑定
  1. 模板与数据绑定
    1. 数据绑定  
数据方向  
单向：从数据源至视图
{{value}}    //插值表达式
[target]=‘value’  //property、attribute、类、样式
bind-target="value" //同上
单向：从视图至数据源
(target)='事件'     //事件
on-target='事件'
双向
[(target)]='value'
bindon-target='value'

                    <app-hero-detail[hero]="currentHero"></app-hero-detail> //传输的是表达式，参与计算
     <app-hero-detailhero="currentHero"></app-hero-detail> //一次性字符串初始化，不会参与计算
2. 事件
       <input[value]="currentHero.name"(input)="currentHero.name=$event.target.value"> 
3. 使用 EventEmitter 实现自定义事件   
    1. 子：<button (click)="delete()">Delete</button>
             deleteRequest= new EventEmitter<Hero>();
                                delete(){
                                        this.deleteRequest.emit(this.hero); 
           }
       父：<app-hero-detail(deleteRequest)="deleteHero($event)"></app-hero-detail>
4. 双向绑定
数据绑定
数据绑定
  1. ngIf
    1. <app-hero-detail*ngIf="isActive"></app-hero-detail>
  2. ngFor
    1. <div*ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
  3. ngSwitch
            数据绑定
  1. 模板引用变量 ( #var ): 模板引用变量通常用来引用模板中的某个DOM元素，它还可以引用Angular组件或指令或Web Component。
    1. <input#phoneplaceholder="phone number">
    2. <button(click)="callPhone(phone.value)">Call</button>
  2. 数据绑定
  3. 安全导航操作符 ( ?. ) 和空属性路径
    1. Angular 的安全导航操作符 (?.) 是一种流畅而便利的方式，用来保护出现在属性路径中 null 和 undefined 值
    2. Thecurrent hero's name is {{currentHero?.name}}

相关推荐