angular使用記錄

ng --version

此版本angular-cli版本是9.1.6，更新最新版本

npm uninstall -g @angular/cli  // 老版本是寫npm uninstall -g angular-cli
npm cache clean -f
npm install -g @angular/[email protected]
           

☆ 子產品化：是從代碼邏輯的角度進行劃分；友善代碼分層開發，保證每個功能子產品的職能單一；

☆ 元件化：是從UI界面的角度進行劃分，前端的元件化，友善UI元件的重用

☆ Angular工程屬于子產品化開發的思想，angular内也有元件（component），子產品（module）是最小化單元。

☆ Vue則屬于元件化開發，元件化是Vue的精髓,Vue就是由一個一個的元件構成的

elementRef

定義：對視圖中某個原生元素的包裝器。

Angular工程通路dom節點可以使用原生方法或者安裝jquery友善的進行dom操作。不過angular自身是有通路dom的api，就是elementRef。不支援直接操作dom。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'angular-test';

  constructor(private elementRef: ElementRef) {
    let targetDiv = this.elementRef;
    console.log(targetDiv);
    console.log(targetDiv.nativeElement.getElementsByClassName('test'));
  }
}
           

Angular父子元件 & ng-content使用

ng-content有點類似于< router-outlet >，充當占位符的角色，不過更類似于vue的<slot></slot>，在元件間互動使用時規定内容的預期位置。

例如：

demo-one元件：

// demo-one component.ts

@Component({
  selector: 'app-demo-one',
  templateUrl: './demo-one.component.html',
  styleUrls: ['./demo-one.component.less']
})
           

// demo-one html
<p>demo-one works!</p>
<p>--start--</p>
<ng-content></ng-content>
<p>--end--</p>
           

app.component使用demo-one元件：

<button (click)="btnClick()">按鈕</button>
<app-demo-one>
  <p>這是app的内容</p>
</app-demo-one>
           

ng-content由上述案例可知，其用于被引入的元件中，決定外部插入的内容的位置。

外部元件通過子元件的selector選擇器名稱引用子元件。