angular组件的基本使用

组件

组件模板

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

  • 属性绑定

    1
    2
    3
    <img [src]="imgSrc" />

    public imgSrc:string="./assets/imgs/1.jpg";
  • 事件绑定

    1
    2
    3
    4
    5
    <button class="btn btn-success" (click)="btnClick($event)">测试事件</button>

    public btnClick(event):void{
    alert("测试事件绑定!");
    }
  • 双向绑定

    1
    2
    3
    <font-resizer [(size)]="fontSizePx"></font-resizer>

    public fontSizePx:number=14;
  • 结构型指令

    • *ngIf

      1
      2
      3
      4
      5
      6
      7
      <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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <li *ngFor="let race of races;let i=index;">
      {{i+1}}-{{race.name}}
      </li>

      public races:Array<any>=[
      {name:"人族"},
      {name:"虫族"},
      {name:"神族"}
      ];
    • *ngSwitch[匹配值]

      1
      2
      3
      4
      5
      6
      7
      <div [ngSwitch]="mapStatus">
      <p *ngSwitchCase="0">下载中...</p>
      <p *ngSwitchCase="1">正在读取...</p>
      <p *ngSwitchDefault>系统繁忙...</p>
      </div>

      public mapStatus:number=1;
  • 属性型指令

    • NgClass

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      <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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      <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

      1
      2
      3
      4
      5
      <p class="text-danger">ngModel 只能用在表单类的元素上面 </p>
      <input [(ngModel)]="currentRace.name">
      <p>{{currentRace.name}}</p>

      public currentRace:any={name:"随机种族"};
  • 管道

    1
    2
    3
    {{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}

    public currentTime: Date = new Date();

    常用管道

    微信图片_20181127171552

组件间的通讯

  • 通讯方案

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

    • 父组件访问子组件方法

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

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

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

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

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

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        //子组件
        (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