Angular 6 開發踩坑

時間 2019-11-29

原文原文鏈接

ng new project-name --style=scss --routing 初始化工程文件以後，若是運行 ng serve -o會出現以下錯誤:

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.sassLoader (/home/local/BROCELIA/zhli/WebstormProjects/ng6-project/node_modules/sass-loader/lib/loader.js:46:72)
ℹ ｢wdm｣: Failed to compile.
複製代碼

由於缺乏依賴包：node-sass，可是隻用sudo npm install node-sass是行不通的，須要使用：sudo npm install --save-dev --unsafe-perm node-sass才能夠正常安裝這個依賴包。css

若是使用sudo初始化工程文件，文件夾會被鎖定，致使webstorm沒法獲取權限沒法編輯文本，因此在terminal中使用sudo chmod 777 ng6-project來給文件夾賦予全部權限，而後使用sudo chown -R zhli /home/local/BROCELIA/zhli/WebstormProjects 來給父文件夾賦予權限，此時就能夠正常編輯文件了。
在Angular工程中使用Material icons時候，先在src/index.html的<head>中添加依賴：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet">
複製代碼

而後使用引用模板：<i class="material-icons">account_circle</i>便可，若是圖片沒有刷新，嘗試sudo npm install material-design-icons 而後 ng -serve -o重啓服務器。html

依賴安裝指令集合：

// 動畫依賴
sudo npm install @angular/animations@latest --save
// Material icons
sudo npm install material-design-icons
複製代碼

建立組件指令集合：

// 建立新組件
ng generate component details
// Request API 服務
ng generate service data
複製代碼

Angular 動畫：

在app.module,ts中引用import {BrowserAnimationsModule} from '@angular/platform-browser/animations';並在import中添加BrowserAnimationsModule。而後在component中添加依賴import {trigger, style, transition, animate, keyframes, query, stagger} from '@angular/animations';並在@component標識符中定義動畫。node

animations: [
    trigger('listStagger', [
      transition('* <=> *', [
        query(
          ':enter',
          [
            style({ opacity: 0, transform: 'translateY(-15px)' }),
            stagger(
              '50ms',
              animate(
                '550ms ease-out',
                // animate ('duration delay easing')
                style({ opacity: 1, transform: 'translateY(0px)' })
              )
            )
          ],
          { optional: true }
        ),
        query(':leave', animate('50ms', style({ opacity: 0 })), {
          optional: true
        })
      ])
    ])
複製代碼

其中：web

Trigger用來觸發動畫
transition用來定義狀態的轉換:open => close, close => open, * => open, * => close, close => *, open => *,void => *, ':enter', ':leave'
style用來定義樣式，對應不一樣的state，也定義在不一樣的state中。樣式的名稱要用駝峯法命名：camelCase

state('open', style({
  height: '200px',
  opacity: 1,
  backgroundColor: 'yellow'
})),
複製代碼

animate就是動畫的定義

transition('open => closed', [
    animate('1s')
  ]),
複製代碼

query()用於在已經定義了動畫的元素內部定義其餘的動畫,This function targets specific HTML elements within a parent component and applies animations to each element individually
tagger()用於在不一樣的動畫之間定義timing gap,在不一樣的animation之間增長動畫延遲
引用時，使用@來引用動畫Trigger的名稱: <div [@triggerName]="expression">...</div>;

Routing: 路由詳細教程
在向app.module.ts中添加HttpClientModule和DataService依賴時，HttpClientModule添加在import中，DataService添加在providers中：

import { HttpClientModule } from '@angular/common/http';
import { DataService } from './data.service';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    /**....**/
    HttpClientModule,
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
複製代碼

Angular支持數據雙向綁定： express

在雙向綁定中，數據屬性值經過屬性綁定從組件流到輸入框（[hero]="selectedHero"）。用戶的修改經過事件綁定流回組件，把屬性值設置爲最新的值（(click)="selectHero(hero)"）。
template 內聯模板的書寫：包在 ECMAScript 2015 反引號 (`) 中的一個多行字符串。反引號 (`) — 注意，不是單引號 (') — 容許把一個字符串寫在多行上，使 HTML 模板更容易閱讀。npm

template: ` <h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> `
複製代碼

使用模板能夠不用再編寫模板文件（按照需求）：bootstrap

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: ` <h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> `
})
export class AppComponent {
  title = 'Tour of Heroes';
  myHero = 'Windstorm';
}
複製代碼

數據類的建立：

建立數據類：ng generate class data

構造屬性：

export class Data {
  constructor( public id: number, public name: string) { }
}
複製代碼

在app.component.ts中導入data數據類以後就能夠在屬性中返回類型化的對象數組了：

dataa = [
      new Data(1, 'Windstorm'),
      new Data(13, 'Bombasto'),
      new Data(15, 'Magneta'),
      new Data(20, 'Tornado')
    ];
    myData = this.dataa[0];
複製代碼

語句上下文的互相引用：

<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
複製代碼