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() {
  }

}