ng-組件

来源:https://www.cnblogs.com/ygjzs/archive/2020/01/22/12228082.html
-Advertisement-
Play Games

幾乎所有前端框架都在玩“組件化”，而且最近都不約而同地選擇了“標簽化”這種思路，Angular 也不例外。 對新版本的 Angular 來說，一切都是圍繞著“組件化”展開的，組件是 Angular 的核心概念模型。 組件的定義 以下是一個最簡單的 Angular 組件定義： ：這是一個 Decora ...


ng-component

幾乎所有前端框架都在玩“組件化”，而且最近都不約而同地選擇了“標簽化”這種思路，Angular 也不例外。

對新版本的 Angular 來說，一切都是圍繞著“組件化”展開的，組件是 Angular 的核心概念模型。

組件的定義

以下是一個最簡單的 Angular 組件定義：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'itcast';
}
  • @Component：這是一個 Decorator（裝飾器），其作用類似於 Java 裡面的註解。Decorator 這個語言特性目前（2017-10）處於 Stage 2（草稿）狀態，還不是 ECMA 的正式規範。
  • selector：組件的標簽名，外部使用者可以這樣來使用這個組件：。預設情況下，ng 命令生成出來的組件都會帶上一個 app 首碼，如果你不喜歡，可以在 angular-cli.json 裡面修改 prefix 配置項，設置為空字元串將會不帶任何首碼。
  • templateUrl：引用外部的 HTML 模板。如果你想直接編寫內聯模板，可以使用 template，支持 ES6 引入的“模板字元串”寫法。
  • styleUrls：引用外部 CSS 樣式文件，這是一個數組，也就意味著可以引用多份 CSS 文件。
  • export class AppComponent：這是 ES6 裡面引入的模塊和 class 定義方式。

組件的模板

  • 內聯模板
  • 模板文件

你可以在兩種地方存放組件模板。 你可以使用template屬性把它定義為內聯的，或者把模板定義在一個獨立的 HTML 文件中， 再通過@Component裝飾器中的templateUrl屬性， 在組件元數據中把它鏈接到組件。

無論用哪種風格，模板數據綁定在訪問組件屬性方面都是完全一樣的。

具體模板語法參考：模板語法

組件通信

參考官方文檔：https://angular.io/guide/component-interaction

組件就像零散的積木，我們需要把這些積木按照一定的規則拼裝起來，而且要讓它們互相之間能進行通訊，這樣才能構成一個有機的完整系統。

在真實的應用中，組件最終會構成樹形結構，就像人類社會中的家族樹一樣：

在樹形結構裡面，組件之間有幾種典型的關係：父子關係、兄弟關係、沒有直接關係。

相應地，組件之間有以下幾種典型的通訊方案：

  • 直接的父子關係：父組件直接訪問子組件的 public 屬性和方法。
  • 直接的父子關係：藉助於 @Input 和 @Output 進行通訊
  • 沒有直接關係：藉助於 Service 單例進行通訊。
  • 利用 cookie 和 localstorage 進行通訊。
  • 利用 session 進行通訊。

無論你使用什麼前端框架，組件之間的通訊都離開不以上幾種方案，這些方案與具體框架無關。

父子通信：Input Down

參考文檔：https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

  1. 父組件通過子組件標簽傳遞屬性
  2. 子組件在內部聲明 @Input 接收
  • Input 是單向的
    • 父組件如果把數據改了，子組件也會更新
    • 但是反之不會
    • 有一個例外，引用類型修改

下麵是一個示例：

子組件：

import { Component, Input } from '@angular/core';
 
import { Hero } from './hero';
 
@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  // 聲明接收父組件傳遞的數據
  @Input() hero: Hero;
  @Input('master') masterName: string; // 接收 master 重命名為 masterName
}

父組件：

import { Component } from '@angular/core';
 
import { HEROES } from './hero';
 
@Component({
  selector: 'app-hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <!-- 在子組件標簽上傳遞數據 -->
    <app-hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </app-hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master = 'Master';
}

父子通信：Output Up

參考文檔：https://angular.io/guide/component-interaction#parent-listens-for-child-event

@Output 的本質是事件機制，我們可以利用它來訂閱子組件上發佈的事件，子組件上這樣寫：

import { Component, EventEmitter, Input, Output } from '@angular/core';
 
@Component({
  selector: 'app-voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)"  [disabled]="voted">Agree</button>
    <button (click)="vote(false)" [disabled]="voted">Disagree</button>
  `
})
export class VoterComponent {
  @Input()  name: string;
  @Output() onVoted = new EventEmitter<boolean>();
  voted = false;
 
  vote(agreed: boolean) {
    this.onVoted.emit(agreed); // 傳遞的數據就是事件對象
    this.voted = true;
  }
}

在父組件中訂閱處理：

import { Component }      from '@angular/core';
 
@Component({
  selector: 'app-vote-taker',
  template: `
    <h2>Should mankind colonize the Universe?</h2>
    <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
    <app-voter *ngFor="let voter of voters"
      [name]="voter"
      (onVoted)="onVoted($event)">
    </app-voter>
    <!-- $event在這裡是自定義事件對象，接收到的是子組件內部發佈事件傳遞的數據 -->
  `
})
export class VoteTakerComponent {
  agreed = 0;
  disagreed = 0;
  voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
 
  onVoted(agreed: boolean) {
    agreed ? this.agreed++ : this.disagreed++;
  }
}

父子通信：父組件直接訪問子組件 public 成員

參考文檔：https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable

對於有直接父子關係的組件，父組件可以直接訪問子組件裡面 public 型的屬性和方法，示例代碼片段如下：

<app-foo #child></app-foo>
<button (click)="child.increment()">調用子組件的方法</button>

顯然，子組件裡面必須暴露一個 public 型的 childFn 方法，就像這樣：

export class FooComponent implements OnInit {
  public message: string = 'foo message'
  public count: number = 0

  constructor() { }

  public increment (): void {
    this.count++
  }

  ngOnInit() {
  }
}

以上是通過在模板裡面定義局部變數的方式來直接調用子組件裡面的 public 型方法。在父組件的內部也可以訪問到子組件的實例，需要利用到 @ViewChild 裝飾器，示例如下：

@ViewChild(ChildComponent)
private childComponent: ChildComponent;

關於 @ViewChild 在後面的內容裡面會有更詳細的解釋。

很明顯，如果父組件直接訪問子組件，那麼兩個組件之間的關係就被固定死了。父子兩個組件緊密依賴，誰也離不開誰，也就都不能單獨使用了。所以，除非你知道自己在做什麼，最好不要直接在父組件裡面直接訪問子組件上的屬性和方法，以免未來一改一大片。

沒有直接關係通信：Service 單例

參考文檔：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

利用 Session 進行通信

小結

組件間的通訊方案是通用的，無論你使用什麼樣的前端框架，都會面臨這個問題，而解決的方案無外乎本文所列出的幾種。

組件生命周期

參考文檔：https://angular.io/guide/lifecycle-hooks

  • ngOnChanges()
  • ngOnInit()
    • 只執行一次
  • ngDoCheck()
  • ngAfterContentInit()
    • 只執行一次
  • ngAfterContentChecked()
  • ngAfterViewInit()
    • 只執行一次
  • ngAfterViewChecked()
  • ngOnDestroy()
    • 只執行一次
  • Angular 一共暴露了8個“鉤子”，構造函數不算。
  • 並沒有組件或者指令會實現全部鉤子。
  • 綠色的4個鉤子可能會被執行很多次，紫色的只會執行一次。
  • Content 和 View 相關的4個鉤子只對組件有效，指令上不能使用。因為在新版本的 Angular 裡面，指令不能帶有 HTML 模板。指令沒有自己的 UI，當然就沒有 View 和 Content 相關的“鉤子”了。
  • 請不要在生命周期鉤子裡面實現複雜的業務邏輯，尤其是那4個會被反覆執行的鉤子，否則一定會造成界面卡頓。

動態組件

參考文檔：https://angular.io/guide/dynamic-component-loader

!> 註意：用代碼動態創建組件這種方式在一般的業務開發裡面不常用，而且可能存在一些隱藏的坑，如果你一定要用，請小心避雷。

組件內容分發

第三方組件庫


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • oracle快速創建用戶、imp/exp導入導出dmp文件
    1.首先我們可以用管理員用戶以sysdba的身份登錄oracle sqlplus username/password as sysdba 2.然後我就可以來創建用戶了. create user username identified by password; 3.創建好用戶我們接著就可以修改用戶的密 ...
  • es6簡單小複習
    Ecmascript 6 ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式發佈了。 Ecmascript 是 JavaScript 語言的標註規範 JavaScript 是 Ecmascript 規範的具體實現 + 具體實現取決於各大瀏覽 ...
  • 在windows系統下，配置vue項目一鍵啟動文件
    我的項目由客戶端、後臺管理、資料庫和伺服器三部分組件，每次啟動項目都要一個一個啟動，挺麻煩的，現在寫一個.bat文件來批處理命令。 這個是我的啟動文件內容。 第一行運行的我wampServer伺服器，我用這個來運行和管理mySql 第二行，先啟動一個新的命令行視窗，\K 是為了不讓視窗自動關閉，我需 ...
  • ng-做一個簡單的通訊錄--學習使用路由和HTTP
    app.module 路由模塊 路由守衛 統一處理認證 註冊 登錄 頁面刪除功能 typescript import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router' import ...
  • ng-輔助操作
    創建組件，指令，過濾器和服務 可輔助創建資源的功能列表： | Scaffold | Usage | | | | | "Component" | | | "Directive" | | | "Pipe" | | | "Service" | | | "Class" | | | "Guard" | | | ...
  • ng-模板語法
    插值 文本綁定 屬性綁定 在布爾特性的情況下，它們的存在即暗示為 ，屬性綁定工作起來略有不同，在這個例子中： 如果 的值是 、`undefined false disabled 元素中。 使用 JavaScript 表達式 編寫模板表達式所用的語言看起來很像 JavaScript。 很多 JavaS ...
  • ng-http
    啟用 Http 服務 open the root , import the symbol from , add it to the array. 發起一個 get 請求 Reading the full response 錯誤處理 ...
  • ng-指令
    在 Angular 中最常用的指令分為兩種，它們分別是 屬性型指令 和 結構型指令 。 NgClass 作用：添加或移除一組 CSS 類 NgStyle 作用：添加或移除一組 CSS 樣式 NgModel 作用：雙向綁定到 HTML 表單元素 NgIf 作用：根據條件添加或移除 DOM 語法： 我們 ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類