nz-upload组件上传文件，如何限制文件类型、文件大小等
摘要：原文链接：这里 0.前言 项目前端使用的组件是Ant Design。最近正好调试项目看到使用nz-uoload进行文件上传。但是要求限制文件上传的类型。这篇文章简单记录一下过程。 前台用的angular+Ant Design for Angular 1.HTML文件 <nz-upload [(nzF
阅读全文
posted @ 2022-02-02 15:17
随笔分类 - Angular
angular中的路由详解(1)—默认路由的用法
摘要：原文链接：这里 0.前言 前一段时间折腾angular的路由折腾的够呛， 这篇文章简单介绍一下自己的理解及用法。 1.路由的功能及原理 一开始并不理解路由的存在，因为学习html的时候，访问模式是下面这样子： 也就是网址会直接访问到我们的页面。那这样有不好吗？或者说有什么问题吗？一个小demo确实没
阅读全文
posted @ 2022-02-02 15:16
Component Xxx is not part of any NgModule or the module has not been imported into your module.
摘要：原文链接：这里 0.背景 调试angular项目时，报这个错。子组件的引用是正确的，可是还是报这个错误。 组件是使用ng g m创建的。 1.解决办法 查看你的xxx.module.ts中是否正确引用了子组件。正确的做法是： import { NgModule } from '@angular/co
阅读全文
posted @ 2022-02-01 19:43
angular中如何使用echarts图表
摘要：原文链接：这里 0.前言 项目中最近要使用echarts做那种看起来高大上的图。于是搞起了echarts。本文主要介绍angualr中如何使用echarts。 anuglar CLI 11.5 1.新建angular项目 新建项目参考：angular从0到1：环境安装及运行 – 每天进步一点点 (l
阅读全文
posted @ 2022-02-01 19:40
angular使用echarts报错：ERROR in The target entry-point “ngx-echarts” has missing dependencies:@juggle/resize-observer
摘要：原文链接：这里 前言 angular使用echarts的时候报错：ERROR in The target entry-point “ngx-echarts” has missing dependencies:@juggle/resize-observer。 解决办法： npm install @ju
阅读全文
posted @ 2022-02-01 19:38
ERROR in : Cannot determine the module for class xxxx Add to the NgModule to fix it.
摘要：原文链接:这里 0.前言 angular项目打包的时候遇到这个问题，大概意思是我的一个component组件没有加到NgModule里面去。 1.解决办法 打开你的项目文件，找到下面这两个文件， 一般报错都是在这两个文件上，本文的报错涉及到routes.moudule.ts。我们打开这个文件，首先看
阅读全文
posted @ 2022-02-01 09:05
angular从0到1：*ngFor的基础用法
摘要：原文链接：这里 0.前言 在HTML中经常需要遍历文件，angular中自带的for语法 *ngFor ，这篇文章中主要介绍 *ngFor的用法。 1.用法介绍 HTML： <p>基础用法</p> <div *ngFor="let item of student1"> {{item}} </div>
阅读全文
posted @ 2022-01-31 16:40
angular从0到1：组件和标签的显示与隐藏
摘要：原文链接：这里 0.前言 前面介绍了ngIf的基本用法。这篇文章中简单介绍下angular中组件和标签的显示与隐藏，主要介绍ngIf、ng-show、ng-hide、hidden。注，本文和网上其他测试结果不一定一样，我查询了很多文章，但是没有效果没有正常实现，不确定是版本问题还是写法问题。 1.用
阅读全文
posted @ 2022-01-31 16:31
angular中从0到1：条件语句ngIf、ngSwitch的使用
摘要：原文链接：这里 0.前言 angular中的if在，一种是 *ngIf=”expression” ,一般写在html中。这篇文章主要记录*ngIf的几种用法。 1. ngIf用法 1.1可以用作显示和隐藏 HTML <div *ngIf="isShow" > 窗前明月光 </div> <button
阅读全文
posted @ 2022-01-31 16:27
angular从0到1：事件(以click事件为例)
摘要：原文链接：这里 0.前言 前面的文章中简单介绍了angular中样式文件的用法。这偏文章主要介绍angular中事件，本文中以click事件为例。 1.简单用法 HTML <button (click)="click1()"> 点击1 </button> <button (click)="click
阅读全文
posted @ 2022-01-31 15:34
angular从0到1：样式(CSS)的使用(下)
摘要：原文链接：这里 0.前言 前面一篇文章中，我们主要介绍了ngClass的使用，这一篇文章中，我们简单介绍下ngStyle的用法。 1.实现 1.1基本用法 HTML： <div [ngStyle]="{'background-color': 'green'}"> <p>窗前明月光</p> </div
阅读全文
posted @ 2022-01-31 15:08
angular从0到1：样式(css)的使用(上)
摘要：原文链接:这里 0.前言 写代码最讨厌的一件事就是写css，真的是难啊。不过还是要写，这篇文章主要记录angular中样式的不同写法。具体演示的是[ngclass]。本文为了表示更加清除，没有使用template模板 1.引用css文件(最原始方法) TS文件： import { Component
阅读全文
posted @ 2022-01-31 12:59
angular中class、ngClass、ng-class、[ngClass]有什么区别
摘要：原文链接：这里 0.前言 一提到CSS我就头大，好家伙angualr中的class更刺激，看文档中说的是[ngClass],百度上有一堆说ng-class的用法的，然后竟然还有一个ngClass！！！！简直要爆炸。这篇文章通过几个案例对比一下区别。 注：本文测试的结果和百度上的很多案例不一样，暂时不
阅读全文
posted @ 2022-01-31 12:57
angular从0到1：数据的单向传递与双向传递
摘要：原文链接：这里 0.前言 前面一篇我们简单介绍了ngOnInit函数和constructor函数，然后对angular中的数据绑定进行了简单介绍。这篇文章中简单介绍一下数据的渲染与双向传递，这里主要是单向传递(渲染)(ts—>html)和数据的双向传递(html—>ts) 本文为了便于展示用的是te
阅读全文
posted @ 2022-01-31 12:50
angular从0到1：数据绑定语法
摘要：原文链接：这里 0.前言 我们要显示数据就数据绑定，angular中的数据绑定语法比较多。 按数据流的方向可以分为三类： 从数据源到视图 从视图到数据源 双向：视图到数据源到视图 按照绑定类型可以分为三类： 第一类从数据源到视图，格式一共有三种： {{expression}} [target]="e
阅读全文
posted @ 2022-01-31 12:49
angular从0到1:生命周期、Constructor和OnInit的区别、自定义函数
摘要：原文链接：这里 本文建议vscode先安装angular的插件，这样很多代码会自动生成 1.Constructor和OnInit的区别 当我们创建一个组件时，ts文件默认写成下面的样子 import { Component, OnInit } from '@angular/core'; @Compo
阅读全文
posted @ 2022-01-31 10:44
angular从0到1：引入UI框架Ant Design
摘要：原文链接：这里 0.前言 在上面几篇文章中，我们成功搭建了angular环境并创建了组件。实际开发中，因为需要自己写页面，所以最好引入一个UI框架，这样写出来的页面就好看多了。本文主要是使用Ant Design for angular，文档地址参考：https://ng.ant.design/doc
阅读全文
posted @ 2022-01-31 10:33
angular从0到1:如何创建和使用一个组件
摘要：原文链接:这里 0.组件和组件之间的关系 试想一个情景，你使用word的时候，word最上方的菜单栏几乎没动过，下面的二级菜单却在随着一级菜单的变化而变化，例如下面这样： 在上面的例子中，红框标记的部分算是一个”组件“，这个组件并不会频繁的刷新，当你点击某个组件(一级菜单)的时候，下面的二级菜单(组
阅读全文
posted @ 2022-01-31 10:31
angular从0到1：angular目录结构详解
摘要：原文链接：这里 一般安装完angular后，文件目录如下： 层次结构可以表示如下： 其中比较重要的是package.json 还有src里面的app。这里面有这样几个文件， app.component.html、app.component.scss、app.component.ts是一个组件。”组件
阅读全文
posted @ 2022-01-31 10:19
angular从0到1：环境安装及运行
摘要：原文链接：这里 0.前言 公司开发需要用到angular,正好把学习过程记录下来。 本文用到的工具vscode+nodejs(V12.18) 1.基础环境搭建 安装angular需要nodejs环境(检验版本是10以上的)，然后使用npm安装cnpm。指令如下： npm install -g cnp
阅读全文
posted @ 2022-01-31 10:16
