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:
在这里插入代码片