Angular小积累

angular自动生成组件命令：

ng g component navbar

绑定事件：

(click) = "toclick()"

模板中循环语句:

*ngFor="let item of array"
//数据装饰器中：
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.css']
})
export class CarouselComponent implements OnInit {
  constructor() { }
  array = [ 8, 9, 6, 4 ];
  ngOnInit() {
  }
}

定义数据：

//定义数据:
export class Product {
    constructor(
        public id:number,
        public title:string,
        public price:number,
        public rating:number,
        public dategories:Array<string>
    ){

    }
}

//定义完数据之后创建对象：
export class CarouselComponent implements OnInit {
    private products:Array<Product>;
    constructor() { }
    ngOnInit() {
        this.products = [
            new Product(1,'第一个商品',22,33,['商品','电子']),
            new Product(2,'第二个商品',22,33,['商品','电子']),
            new Product(3,'第三个商品',22,33,['商品','电子']),
            new Product(4,'第四个商品',22,33,['商品','电子']),
            new Product(5,'第五个商品',22,33,['商品','电子']),
        ]
    }
  }

属性绑定用方括号：[src]="imgUrl"
绑定样式：

 <span *ngFor="let start of stars" class="default" [class.active]="start"></span>//这句话的意思是span标签是否绑定active类取决于start，当start为true时有active类，否则没有

父子组件传值：

image.png
image.png