angular组件的基本使用

组件

组件模板

  • ng generate component xxx 新建组件(大驼峰命名)

  • 属性绑定

    <img [src]="imgSrc" />
        
    public imgSrc:string="./assets/imgs/1.jpg";
    
  • 事件绑定

    <button class="btn btn-success" (click)="btnClick($event)">测试事件</button>
    
    public btnClick(event):void{
        alert("测试事件绑定!");
    }
    
  • 双向绑定

    <font-resizer [(size)]="fontSizePx"></font-resizer>
    
    public fontSizePx:number=14;
    
  • 结构型指令

    • *ngIf

      <p *ngIf="isShow" style="background-color:#ff3300">显示还是不显示?</p>
      <button class="btn btn-success" (click)="toggleShow()">控制显示隐藏</button>
      
      public isShow:boolean=true;
      public toggleShow():void{
          this.isShow=!this.isShow;
      }
      
    • *ngFor

      <li *ngFor="let race of races;let i=index;">
          {{i+1}}-{{race.name}}
      </li>
      
      public races:Array<any>=[
          {name:"人族"},
          {name:"虫族"},
          {name:"神族"}
      ];
      
    • *ngSwitch[匹配值]

      <div [ngSwitch]="mapStatus">
          <p *ngSwitchCase="0">下载中...</p>
          <p *ngSwitchCase="1">正在读取...</p>
          <p *ngSwitchDefault>系统繁忙...</p>
      </div>
      
      public mapStatus:number=1;
      
  • 属性型指令

    • NgClass

      <div [ngClass]="currentClasses">同时批量设置多个样式</div>
      <button class="btn btn-success" (click)="setCurrentClasses()">设置</button>
      
      public currentClasses: {};
      
      public canSave: boolean = true;
      public isUnchanged: boolean = true;
      public isSpecial: boolean = true;
      
      setCurrentClasses() {
          this.currentClasses = {
              'saveable': this.canSave,
              'modified': this.isUnchanged,
              'special': this.isSpecial
          };
      }
      
      .saveable{
          font-size: 18px;
      } 
      .modified {
          font-weight: bold;
      }
      .special{
          background-color: #ff3300;
      }
      
    • NgStyle

      <div [ngStyle]="currentStyles">
          用 NgStyle 批量修改内联样式!
      </div>
      <button class="btn btn-success" (click)="setCurrentStyles()">设置</button>
      
      public currentStyles: {}
      public canSave:boolean=false;
      public isUnchanged:boolean=false;
      public isSpecial:boolean=false;
      
      setCurrentStyles() {
          this.currentStyles = {
              'font-style':  this.canSave      ? 'italic' : 'normal',
              'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
              'font-size':   this.isSpecial    ? '36px'   : '12px'
          };
      }
      
    • NgModel

      <p class="text-danger">ngModel 只能用在表单类的元素上面 </p>
          <input [(ngModel)]="currentRace.name">
      <p>{{currentRace.name}}</p>
      
      public currentRace:any={name:"随机种族"};
      
  • 管道

    {{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}
    
    public currentTime: Date = new Date();
    

    常用管道

    微信图片_20181127171552

组件间的通讯

  • 通讯方案

    • 直接的父子关系,父组件直接访问子组件的 public 属性和方法
    • 直接的父子关系,借助于 @Input 和 @Output 进行通讯
    • 没有直接关系,借助于 Service 单例进行通讯
    • 利用 cookie 和 localstorage 进行通讯
    • 利用 Session 进行通讯
  • 直接调用

    • 父组件访问子组件方法

      //子组件定义一个public的方法,父组件直接调用
      //子组件
        public children():void{
          alert("I am a children");
        }
      //父组件模板
      <app-child  #child></app-child>
      <button (click)="child.children()" class="btn btn-success">直接调用子组件</button>
      
    • 父组件导入子组件直接访问

      //子组件
      @ViewChild(ChildComponent)
      private childComponent: ChildComponent;
      
  • @Input 和 @Output

    • @Input ,在父组件设置子组件的属性

      //子组件
      @Input()
      public panelTitle:string;
      //父组件上可以这样设置 panelTitle 这个参数
      <child panelTitle="一个新的标题"></child>
      
    • @Output

      • 子组件调用父组件的事件

        //子组件
        (click)="emitAnEvent()"
        
          @Output()
          public follow=new EventEmitter<string>();
          public emitAnEvent(event):void{
            this.follow.emit('follow')
          }
        //父组件
         (follow)="doSomething()"
        
  • 利用 Service 单例进行通讯

  • 利用 cookie 或者 localstorage 进行通讯

  • 利用 Session 进行通讯

注意

  • 组件模板-双向绑定 [()]
  • 发布ng build --prod(压缩代码) --source-map 帮助调试
  • ng test 单元测试
  • 项目检出,git checkout template