Angular基础学习

一、目前理解的概念

Angular是组件的概念，整个项目由各个组件组成，比如一个商品列表页面，导入一个提醒的组件，商品列表定义事件，完成商品列表和提醒的组合。别的列表页面同时也可以导入这个组件，定义不同的事件，提高复用率。

二、组件结构

一个组件由三个文件组成，分别是css文件、html文件、ts文件，格式为：组件名称+components.css/html/ts，其中ts文件第一次接触，是一个专门编写事件的文件，感觉结构很清晰。

其中包含了2个组件，分别由css、html、ts文件组成；一个商品弹窗组件，一个商品列表组件

三、demo讲解(样例使用的angular官网的)

两个组件的css文件都未使用，就不解释了

商品列表的 html文件，product-list.component.html

<h2>Products</h2>
<!-- 只要前面带 * 的都是angular的模板语法 -->
<!-- *ngFor：相当于一个for循环，let 实体 of 实体List -->

<div *ngFor="let product of products">

  <h3>
    <!-- 属性绑定[],把 a 标签的title属性绑定为：product(实体).name + 'details'(String文字) -->
    <a [title]="product.name + ' details'">
    <!-- 插值展示{{}}， -->
      {{ product.name }}
    </a>
  </h3>
    <!-- if判断语句标签，只有当实体product存在description属性时才会展示这个P标签 -->
  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>
    <!-- 事件绑定(),绑定点击事件，事件方法在ts文件中 -->
  <button (click)="share()">
    Share
  </button>




  <!-- 1.导入的商品弹窗组件，标签app-product-alerts 不是瞎写的 -->
  <!--   1.1.app-product-alerts和组件ts文件的@Component装饰器里面的selector值是对应的 -->
  <!-- 2.绑定属性[product]把商品(也就是实体)传入组件 -->
  <!--   2.1.这里想要传过去，需要在弹窗组件的ts文件中 从 @angular/core 导入 Input。-->
  <!--   2.2.然后在下面的clss中定义一个带有 @Input() 装饰器的 product 属性来接收 -->
  <!-- 3.传过去还有另外一个要求，就是要在弹窗组件的ts文件中导入输出 -->
  <!--   3.1.从 @angular/core 中导入 Output 和 EventEmitter -->
  <!--   3.2.用 @Output()装饰器和一个事件发射器 EventEmitter()实例定义一个名为 notify的属性-->
  <!--   3.3.这样才能让提醒组件在特定条件下发出事件-->
  <!-- 4.绑定事件(notify)，方法onNotify()在ts文件写一下 -->
  <app-product-alerts  [product]="product" (notify)="onNotify()">
  </app-product-alerts>

</div>

商品列表的 ts事件文件，product-list.component.ts

/* 导入 @angular/core */
import { Component } from '@angular/core';

import { products } from '../products';
/* 装饰器，表面他下面的类是一个组件 */
@Component({
  selector: 'app-product-list', // 别人调用的时候标签就要写这个
  templateUrl: './product-list.component.html', // 标明html位置
  styleUrls: ['./product-list.component.css'] // 标明css位置
})
export class ProductListComponent {
  products = products;

   // 事件方法
  share() {
    window.alert('The product has been shared!');
  }
    // 事件方法
  onNotify() {
    window.alert('You will be notified when the product goes on sale');
  }
}

商品弹窗的 html文件，product-alerts.component.html

<!-- if判断语句 -->
<p *ngIf="product.price > 700">
  <!-- 定义的点击事件，由ts文件中定义的EventEmitter 把事件发出去 -->
  <button (click)="notify.emit()">Notify Me</button>
</p>

商品弹窗的 ts文件，product-alerts.component.ts

import { Component, OnInit } from '@angular/core';
/* 导入input 让组件能够收到实体*/
import { Input } from '@angular/core';
/* 导入输出 EventEmitter 事件发射器，让提醒按钮在发生变化时发出事件*/
import { Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {
  //定义带@Input装饰器的product属性，@Input装饰器指出 product属性值是从父组件传过来的
  @Input() product;
  // 用 @Output() 装饰器和一个事件发射器 EventEmitter() 实例定义一个名为 notify 的属性
  // notify 发生变化就发出事件
  @Output() notify = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }

}