Angular6入門

一. 腳手架安裝 

    全局安裝腳手架：

npm install -g @angular/cli複製代碼

    建立新項目：

ng new my-app（項目名）複製代碼

    轉到項目目錄：

cd my-app複製代碼

    啓動服務器：

ng serve --open  複製代碼

    注：若是 4200 窗口已啓動，再次啓動服務器，命令行提示報錯：

Port 4200 is already in use. Use '--port' to specify a different port複製代碼

    須要輸入命令行：

ng serve -o --port 1111（窗口名），啓動新窗口複製代碼

    建立新組件：

ng generate component heroes（組件名）複製代碼

    Angular最佳實踐是在單獨的頂級模塊中加載和配置路由器：

ng generate module app-routing --flat --module=app
複製代碼

路由器插座，爲了導出：

<router-outlet></router-outlet> 複製代碼

    若是提示安裝包出錯： 先檢查是否是網路問題，能夠安裝淘寶鏡像cnpm 最傻瓜式操做：移除 node_modules 文件夾及 package-lock.json 文件，執行npm install 對於部分類庫版本低的問題怎麼查看：腳手架在 package.json 裏多數類庫都是使用寬鬆的版本號，^0.1.0 帶有 ^ 符號表示使用最新次版本號 注意： 這種方式會對全部類庫按比較新的版本安裝，但有可能會致使因爲第三方類型的破壞性變動會致使一些沒必要要的麻煩 

二. angular 指令 

[ngModel] ( 雙向綁定 )

<input type="text" [(ngModel)]="title"> 複製代碼

ngNonBindable ( 禁止綁定 ) 

<div ngNonBindable>{{title}}</div>

注：使用了 ngNonBindable ，花括號就會被當作字符串一塊兒顯示出來。
複製代碼

[ngStyle] ( 綁定style樣式 )

<div [ngStyle]="{'background-color': 'red'}"></div>
綁定一組樣式：
<div [ngStyle] = 'divStyle'>div綁定一組樣式</div>
divStyle = {
  'background':'#ccc',
  'font-size':'30px'
} 複製代碼

[class.active] ( class動態綁定 ) 

[class.active]="isActive"
綁定多個：
<div [ngClass]="{'active1': 'true', 'active2': true}">class</div>
複製代碼

*ngIf ( 控制DOM元素添加和刪除 ) 

<div *ngIf = 'true'>添加元素</div>
<div *ngIf = 'false'>刪除顯示</div>
複製代碼

(click) ( 事件綁定 ) 

<div (click) = 'divClick()'>點擊</div>
複製代碼

.enter( 事件修飾符) 

<input type="text" (keyup.enter) = "divClick()">複製代碼

*ngFor ( 循環一個數組對象 ) 

<ul *ngFor = "let v of obj;let i=index">
   <li>{{v}}--{{i}}</li>
</ul>
複製代碼

[ngSwitch] ( 循環語句 ) 

message = {'name':'tian'}

<ul [ngSwitch]="message.name">
   <li *ngSwitchCase="tian">知足條件</li>
   <li *ngSwitchCase="kuo">不知足條件</li>
   <li *ngSwitchDefault>默認</li>
</ul>複製代碼

三. angular 幾種經常使用方法

$event事件代理

<ul (click) = "eventAgent($event)">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

eventAgent(event){
   console.log(event.target)
}複製代碼

set監聽 

set title(newTitle: string){
  console.log(newTitle)//返回監聽屬性值
}複製代碼

四. angular 生命週期函數

    一、指令與組件共有的鉤子： 

ngOnChanges( 當數據綁定輸入屬性的值發生變化時調用 )

ngOnInit( 在第一次 ngOnChanges 後調用)

ngDoCheck( 自定義的方法，用於檢測和處理值的改變 )

ngOnDestroy( 指令銷燬前調用 )
複製代碼

    二、組件特有的鉤子 

ngAfterContentInit( 在組件內容初始化以後調用 )

ngAfterContentChecked( 組件每次檢查內容時調用 )

ngAfterViewInit( 組件相應的視圖初始化以後調用 )

ngAfterViewChecked( 組件每次檢查視圖時調用 )複製代碼

五. angular 組件

//子組件
<div>
  child
</div>
//父組件
<div>
     parent
     //子組件在父組件渲染
     <app-child></app-child>
</div>
複製代碼

@Component({
    selector: 'app-child',
    templateUrl: './app-child.component.html',
    styleUrls: ['./app-child.component.less']
})
複製代碼

 六. 父子<=>傳參

    1. 父=>子組件傳參（1）     

父傳子：
<div>
   <app-child [name] = "title"></app-child>
</div>
子組件接收：
@Input()//輸入屬性，在父組件經過屬性綁定，傳遞數據到子組件（父=>子）
public name

接收參數
receiving(){
   //打印所傳參數
   console.log(this.name)
}
執行此方法完成傳參：this.receiving()
複製代碼

    2. 子=>父組件傳參（2） 

子傳父：
<div>
   <app-heros1 [name] = "title" (foo) = "bar($event)"></app-heros1>
</div>
bar(event){
   console.log(event);//打印‘傳入父級組件’
}
子組件傳入
@Output() //輸出屬性，在父組件經過綁定事件，把子組件中的數據傳遞到父組件（子=>父）
foo = new EventEmitter<string>();
todo(){
   this.foo.emit('傳入父級組件');
}
執行此方法完成傳參：this.todo()
複製代碼

 七. 服務注入

// 將父組件當作服務注入到子組件中
import {AppComponent} from "../app.component";
constructor(
   private appComponent:AppComponent,
) { }

// 將子組件當作服務注入到父組件中
import { ViewChild } from '@angular/core';
import { HeaderComponent } from './header/header.component';
@ViewChild(HeaderComponent)
private headerComponent: HeaderComponent;

注：父子組件不可互相做爲服務注入模塊複製代碼

 八. 路由跳轉及傳參 

// 跳轉路由需引入
import { ActivatedRoute, Router } from '@angular/router';
<button (click) = "jump()">跳轉</button>
constructor(
   private activatedRoute: ActivatedRoute,//接受跳轉後傳入的對象
   private router: Router,       //設置路由跳轉
){}
jump():void{
   // navigate          第一個參數爲英雄路由，第二個參數是跳轉路由傳入的值（所傳值是JSON對象）
   this.router.navigate(["/heros",{queryParams:{obj:{ id: 1, foo: 'foo' }}}])
}
//跳轉路由取值
console.log(JSON.parse(this.activatedRoute.queryParams['value'].obj))

結合以上路由跳轉可能會用到此方法，返回上一級路由
this.location.back()
複製代碼