Angular 6 开发踩坑_Sleepy 😪的专栏文章_微信文章

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才可以正常安装这个依赖包。

如果使用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重启服务器。

依赖安装指令集合：

// 动画依赖
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标识符中定义动画。

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
        })
      ])
    ])
复制代码

其中：

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: 路由详细教程