mp-1

ng new marketplace --routing --style scss

package.json：

// dependencies
"crypto-js": "^3.1.9-1",
"date-fns": "^1.30.1",
"hammerjs": "^2.0.8",
"lodash.clonedeep": "^4.5.0",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"ng-zorro-antd": "^7.0.0-rc.1",
"ngx-gallery": "^5.9.0",
"ngx-image-gallery": "^1.3.1",

"tslint-config-alloy": "^0.2.1",
"@angular/http": "~7.2.1",

// polyfills.ts:
"web-animations-js"
"classlist.js"

// devDependencies
"tslib": "^1.9.3",
"rimraf": "^2.6.3",

angular.json：

 "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss",
          "spec": false
        },
        "@schematics/angular:service": {
          "spec": false
        }
      },

antd：

// 官网脚手架：安装antd：
 ng add ng-zorro-antd --locale=zh_CN  --theme

主题颜色覆盖：

// -------- 自定义参数覆盖 -----------
//@primary-color: #3EB08A;

icon的 单独加：

 {
      "glob": "**/*",
      "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
      "output": "/assets/"
    }

reset.css和normalize.css区别：
reset.css：https://blog.csdn.net/brain_bo/article/details/81560444
reset.css中有行没有用的：

html{
  //overflow-y: scroll;
}

normalize.css：

"styles": [
        "styles.css",
        "../node_modules/normalize.css/normalize.css"
      ]

在这加个antd组件样式更改的文件，custom-antd.scss：

@import "assets/styles/custom-antd";

关于入场动画的问题：
入场动画问题：
HTML：
找一个加载动画效果，id为：preloader，放在index.html中；
参考：https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
core/preloader-spinner.service:

export class PreloaderSpinnerService {
  private _selector = 'preloader';
  private _element: HTMLElement;
  constructor() {
    this._element = document.getElementById(this._selector);
  }
  public show(): void {
    this._element.style['display'] = 'block';
  }
  public hide(delay = 0): void {
    setTimeout(() => {
      this._element.style['display'] = 'none';
    }, delay)
  }
}

core.module中providers:PreloaderSpinnerService，在app.module中：imports：CoreModule，然后在app.component中：

constructor(
  private preloader:PreloaderSpinnerService
) {}


ngAfterViewInit(){
  this.preloader.hide();
}

main.ts：

if (environment.production) {
  enableProdMode();
  window.console.log = () => {};
  window.console.info = () => {};
  window.console.warn = () => {};
  window.console.error = () => {};
  window.console.debug = () => {};
}

模块：
core，share，home，product

share.module:在其他模块importsshareModule

const SHARE_COMPONENT=[
  DefaultLayoutComponent,
  DefaultHeaderComponent,
  DefaultFooterComponent,
  FooterInfoComponent
];

@NgModule({
  declarations: [
    ...SHARE_COMPONENT,
    NavComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    HttpClientModule,
    NgZorroAntdModule,
  ],
  exports:[
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule,
    NgZorroAntdModule,
    ...SHARE_COMPONENT
  ]
})

ng g m core
ng g m share
 ng g m home
ng g m product --routing

ng g c share/default-layout
ng g c share/default-header
ng g c share/default-footer
ng g c share/footer-info
ng g c share/nav
 ng g service core/preloader-spinner
 ng g c home/home
ng g c product/product-center
ng g c product/product-list
ng g c product/product


// 服务
 ng g service home/home
 ng g service product/product
 

页面布局：flex：
描述：左右两侧 布局，且有固定值的padding：

padding:40px 240px;
display: flex;
justify-content: space-between;

块1里面的行内元素里的块2，如果给块2设置w和h，那么继承自块1，跟行内元素没有关系。
div>a>img。

总是设置颜色，记不住，使用变量。我们把变量放在了bem.scss中（引入bem就可以使用）：

$primary-color:#3EB08A; // 自定义主题色

app.routing：

const routes: Routes = [
  {path:'',pathMatch:'full',redirectTo:'/pages'},
  {path:'pages',component:DefaultLayoutComponent,
  children:[
    {path:'',redirectTo:'home',pathMatch:'full'},
    {path:'home',component:HomeComponent},
  ]}
];

问题：
footer-info和default-footer里面的下面的代码干嘛的？

changeDetection: ChangeDetectionStrategy.OnPush,

constructor(private cdRef: ChangeDetectorRef) { }
ngAfterViewInit(): void {
  this.cdRef.detach();
}

路由默认选中：

 <a href="javascript:;" class="mp-nav__link"
      routerLink='/pages/home' routerLinkActive='active'>
        首页
</a>

css中的active类：

&.active{
      border-bottom: 2px solid $primary-color;
}

注：使用的是antd的哪个版本：在使用dropdown的时候，7.x和8.x用法不一样的。

调用接口报错404：
此时，还没有代理呢。
先增加proxy.conf.json

"start": "ng serve --proxy-config proxy.conf.json --port 4200 --disable-host-check true",

创建service文件：（在上面）

http的时候，没有baseService封装处理的函数，使用了http拦截器（Interceptors），用来处理http的统一处理函数，eg：

在这里插入代码片