![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Angular
angular实践
JiAyInNnNn123
这个作者很懒,什么都没留下…
展开
-
Angular day3 父子模块通信
只是加强自己的记忆,目前来说只适用于自己。ngx-datatable 一个ng的表格组件请求会来的数据回显页面赋值:[rows]="orders" //orders是接受后端发送的数据//这是ng中传值的方法//写在ngx-datatable 这个标签中父子模块通信:@ViewChild和@Inject一、@ViewChild父组件中使用@ViewChild拿到子组件的变...原创 2020-04-15 17:45:35 · 177 阅读 · 0 评论 -
ng项目启动时ts版本报错
ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.3.0 but 3.8.3 was found instead.解决办法:重新cnpm i //或者npm i启动后还是报错下载指定版本cnpm install typescript@">=3.1.1 <3.3.0"还是报...原创 2020-05-06 13:29:13 · 347 阅读 · 0 评论 -
Angular父组件获取子组件表单数据状态
当前场景:父组件有表单保存按钮。子组件是表单。我需要在子组件中表单输入符合验证时向父组件通知当前保存按钮可以按。如何解决:通过formgroup中的statusChanges变化为验证通过后向外发送数据在子组件的ngOnInit中写入如下代码:this.form.statusChanges.subscribe((res: any) => { if (res === 'VALID'){ this.baseData.emit(this.form.value);原创 2020-07-15 16:28:03 · 1216 阅读 · 0 评论 -
Angular表单报错:No value accessor for form control with name: ‘XXX‘
说一下当前业务场景:angular响应式表单,封装下拉组件,给下拉组件添加 formControlName,并且在formgroup中声明该formControlName对应的name,运行项目报错。解决方法:在组件标签内加入type=“xxxx” (对应你的formControlName)即可解决报错截图:报错代码处 <app-params-drop-list formControlName="intakeTypeId" [basicOption]="basicOption.Agmac原创 2020-07-16 15:59:13 · 2820 阅读 · 0 评论 -
Angular 装饰器 HostListener 监听DOM事件 使用指南
需求:查询搜索时,希望点击回车默认搜索,不点击搜索按钮解决方案:在输入的input框中写入(keyup.enter)="ngxQuery.executeQuery()"当前业务搜索框有搜索后下拉选择,导致选择后回车无效。最完美的解决办法:使用整个页面监听dom,用户点回车后执行查询事件。就用到了 angular的HostListener以下-----使用指南import { HostListener} from '@angular/core';@HostListener('window:k原创 2020-08-11 13:15:44 · 2158 阅读 · 0 评论 -
Dynamic imports are only supported when the ‘--module‘ flag is set to ‘es2020‘
出现原因:使用ng框架升级至9,在core中引入路由的方式变化为:执行项目时终端报错:错误TS1323:仅当’–module’标志为’commonjs’或’esNext’时,才支持动态导入。解决方式:您正在使用动态导入,因此必须像这样更改tsconfig.json才能将代码定位到esnext模块{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc",原创 2021-03-30 16:30:47 · 3058 阅读 · 0 评论 -
angular父组件中获取多个相同子组件
场景:父组件中 用ngfor循环获取多个相同的子组件,在父组件中调用子组件事件。用户点击按钮整体调用所有的子组件的方法使用模版变量在ts中引入子组件:`@ViewChildren(‘searchDropDown’)searchDropDown: QueryList;注意:和别的引入不同,因为是多个子组件,所以是ViewChildren,`调用:...原创 2021-04-27 19:51:15 · 863 阅读 · 2 评论 -
angular父子组件传入字段顺序
业务场景:父组件传给子组件两个值:分别为:type 和data在子组件中,在data接受的input方法中,使用了最新的type值。问题:当我传入data时,type不是最新值。排查:打断点,两个值都是同时有的,执行顺序问题1.input的顺序,type需要在input之前,执行在data时,就是最新的type值了。2.父组件引用子组件传值的顺序在标签中,第一个传入type 第二个传入data ,否则就算1是按照顺序来的,但是实际执行还是会按照外层标签传入值的顺序执行。...原创 2021-11-03 16:44:46 · 197 阅读 · 0 评论 -
Angular day1创建项目
首先创建一个angular项目,方便以后学习1、首先安装node和npm2、安装angular CLInpm install -g @angular/cli3、进入要创建项目的目录,在cmd命令框中输入:ng new +项目名称ng new angulardemotest终端会让你选择一些配置如下图,路由和css样式4、安装后文件目录运行项目:在当前项目目录下npm i ...原创 2020-04-13 20:02:00 · 157 阅读 · 1 评论 -
Angular day2 组件相关 + pipe
1.循环 ngFor//在html文件中<div>{{title}}</div><ul> <li *ngFor="let item of menus"><a href="#">{{ item.title }}</a></li></ul>//在对应html文件的component.ts文...原创 2020-04-14 13:53:31 · 267 阅读 · 0 评论 -
Angular Day4 生命周期
学习Angular的时候总是搞不清楚ngOnInit和constructor的区别。来说明一下。//一个组件的 ts文件中:import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';export interface TopMenu { title: string; link: st...转载 2020-04-16 21:32:03 · 355 阅读 · 0 评论 -
Angular Day5 小总结
模板在组件类中的引用原创 2020-04-22 21:26:26 · 101 阅读 · 0 评论 -
Angular Day6 表单 + 模块
零零碎碎看了两天ng的表单部分,其实还是没有特别理解,所以趁着休息按照网上的教学视频自己写几个例子加深理解~html部分:姓名: <input type="text" [(ngModel)]="peopleInfo.username"> <button type="submit" (click)="submit()"> 提交</button> {{ ...原创 2020-04-25 21:31:29 · 364 阅读 · 0 评论 -
angular7中动态绑定标签样式
初学angular的小菜狗今儿分享一下百度好多没找到 <a class="btn-link mr-2" (click)="goUp(row,rowIndex)" [ngStyle]="{'color' : rowIndex==0 ? '#C9C9C9':'blue' } " > 上调 </a>用三元表达式动态绑定标签样式...原创 2020-06-05 13:49:27 · 741 阅读 · 0 评论 -
Angular 7表单输入框联动
业务场景:购买次数输入框和预警次数输入框。要求预警次数小于购买次数。当超过的时候需要文字提示。解决办法:写一个方法 validateBiggerBuyTimesAndWarinTimes() { if (!this.productForm.value.xxx) { return true; } if (this.productForm.value.yyy&& this.productForm.value.xxx) { if (Number(原创 2020-06-22 11:01:40 · 424 阅读 · 0 评论 -
Angular报错Error: StaticInjectorError(AppModule)
报错如下:意思是:没有注入1中的2解决:2 哪个组件报错,就在对应的module.ts注入即可,在我这里是app.module.ts。规范来说每个组件应该有对应的一个module.ts文件,用于链接懒加载。只需要在AppModule中注入报错文件即可...原创 2021-12-28 10:48:18 · 1647 阅读 · 0 评论 -
Angular封装表单组件--使用ControlValueAccessor指南
首先介绍一下:Angular父组件获取子组件表单数据状态爆出错误,导致发现我自行封装表单组件并没有引入ControlValueAccessor原创 2020-07-16 16:54:12 · 1284 阅读 · 0 评论 -
angualr路由传值
业务场景:使用angular框架,点击按钮跳转新的tab页面,并且带上上一个页面的值。首先在当前组件的routing.module 里声明一下xxxx-routing.module.ts文件:const routes: Routes = RouteExtensions.withHost( { path: '', component: XXXXXXXXXComponent }, [ { path: '你的路径,写在数组里呀!', component: 你要引入的Comp原创 2020-06-12 15:21:26 · 131 阅读 · 0 评论 -
angular7表单数据联动验证
首先介绍一下当前我的业务场景:表单页面上有两条数据,举个例子:库存和出售量。首先库存是不能超过出售量的。当用户输入的时候,库存是不能超过售出量的,所以我需要对这两个表单值进行联动。期初思路:1.vue框架下一样,手写一个方法,判断如果不过就return false ,过了就true2.使用angular中的异步验证。1.手写一个比较方法,获取的是formgroup里的value值,在group声明的时候调用方法checkNum,但是并不能获取到当前input框的值(此处可能表达不明确,上代码原创 2020-06-09 11:29:35 · 719 阅读 · 1 评论 -
Angular报错:Type xxxComponent is part of the declarations of 2 modules: xxxxxx
报错截图以上出现原因:当前两个模块有公用组件,文件目录结构:machine-classify和tool-classify都引用了component下的creat-edit-model当我点击tool-calssify时会在控制台报错解决办法:在creat-edit-model下创建moudle.ts文件,export当前组件即可解决...原创 2020-07-24 08:58:47 · 1492 阅读 · 0 评论 -
Angular7使用ngx-translate多语言配置采坑记录
步骤:下载安装包:npm install @ngx-translate/core@10.x --savenpm install @ngx-translate/http-loader@4.x --save在项目中src/assets/下创建i18n文件;以下例子是中英文的json文件json文件里写入数据对应的中文:大概就是这个样子哈,在跟模块app.module.ts导入模块import { TranslateHttpLoader } from '@ngx-translate/h原创 2020-09-15 21:57:01 · 1239 阅读 · 0 评论 -
解决:Component Xxx is not part of any NgMo
报错截图出现原因:没有在NgModule中声明此模板解决办法:将XxxComponent 添加到 xxx.module.ts文件的@NgModule位置 ,如下当前组件是弹窗所以在entryComponents里引入了~原创 2020-11-02 15:20:01 · 349 阅读 · 0 评论 -
Angular7 自定义管道pipe
首先介绍一下ng里的管道:angular的自定义pipe最基础的自定义pipe就是接收一个value,然后返回另外一个value。参数的形式不限,可以是string、number、object等任何类型。接下来会做一个简单的自定义pipe的实例,比如我们在显示文件大小的时候,我们看到文件单位为byte需要转化为MB,这样相对来说可能会更好理解及清晰明了。在此之前,我们先了解下如何使用pipe。当前例子的场景:后端返回我0,1,2对应的页面应该展示对应的文字,因为返回的是表格数据,并且字段有3个,原创 2020-12-23 17:15:17 · 475 阅读 · 0 评论 -
formgroup--表单切换后,必填字段显示验证
当前场景:当用户选择【协议分类】为【业务数据】时,展示下面两个formcontrol,并且两个formcontrol为必填,切换事件: this.form.get('dataOwnerIds').setValue(''); this.form.get('pushTargetIds').setValue(''); this.form.get('dataOwnerIds').setValidators(!this.showOtherData ? Validators.required原创 2021-12-01 09:57:46 · 866 阅读 · 0 评论 -
angular9启动项目报错:ERROR in The target entry-point “primeng/editor“ has missing dependencies:
解决方案:npm install --save chart.js解决方案:npm install --save quillnpm install --save @fullcalendar/core原创 2021-03-22 16:30:06 · 1679 阅读 · 0 评论 -
angular自定义表单控件,解决错误No value accessor for form control with name: ‘xxx‘
最近在开发的时候用了自定义表单控件但是一直报错,报同标题的错误。查了一下是自定义组件没有引入ControlValueAccessor 但是我已经引入了。百度过在引用自定义表单控件的标签写入ngDefaultControl,相当于使用了DefaultValueAccessor指令的。报错:No value accessor for form control with name: ‘xxx’。原因:将name绑定到了一个没有对应’value’的地方,或者说是找不到获取对应的’value’的通道。代码使原创 2021-05-04 15:20:18 · 1520 阅读 · 0 评论 -
angular项目中在html中使用枚举
angular项目需要用的ts。ts中就有枚举。当我们想在html中使用枚举的时候。如何实现呢?首先我们要先维护一个枚举.ts的文件:图片中红框为例子,我想在html中使用它。首先需要在对应的ts文件引入他看图,上差异就是一个是 = ,其他赋值都是:这时候在html中可以正常使用了需要注意的是:在ts中一定是等号!!另外一种解决方式,就是直接在当前组件的ts文件中维护你的枚举,但是不利于多个组件公用一个枚举哈。...原创 2021-06-15 11:17:51 · 1432 阅读 · 0 评论 -
angular中formArray中formGroup动态添加controlName注意点
当前场景:一个动态表格形式。上图更能清晰说明情况。本文介绍的问题背景:动态表头,当我添加一个列的时候,需要在formarray中的formgroup中添加一个controlName问题出现:进入编辑状态,添加一个表头,第一条数据进行修改后,第二条数据默认同第一条数据一致。但是页面上没同步数据。解决思路:编辑状态下,所以看新建状态有无同样问题。==结果没有。确定是哪里数据进行了变化。=结果是formgroup数据变化就赋值,所以问题锁定formgroup相关上。最后位置:在添加一列的事件上:原创 2021-10-05 13:59:31 · 990 阅读 · 0 评论 -
angular父子组件传值时没有执行input中的方法
场景:在子组件1中向外emit一个datafu原创 2021-08-24 16:00:35 · 293 阅读 · 0 评论 -
angular响应式表单动态修改表单验证
问题背景:需求如图,下方列表是一个formArray组成的一个表单数组。通过上方的修改我可以修改这个formArray中的表头,以及每一个formArray中的formGroup中的controlName。当前问题:点击必填后,页面展示* 取消必填,对应表头不展示*,但无法保存。问题原因:点击必填checkbox时,修改了当前controlName的Validators.required为null,但是无效。解决方法:当用户的取消选择必填时: this.form.controls.forEa原创 2021-09-23 11:36:21 · 1782 阅读 · 1 评论 -
angular引入腾讯地图组件+相关配置
1.配置对应appkey 腾讯地图我的应用2.在项目中的index.html中用script标签引入访问地址:<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你配置的appkey"></script>3.在要展示地图的组件中,写一个标签,使用id选择器ts代码://当前我的id是:map-content getMap() { let map = new TMap.M原创 2021-12-13 17:03:55 · 829 阅读 · 0 评论 -
Ueditor自定义三方弹窗展示+angular框架中使用
业务场景:在基于Ueditor的功能基础上,需要二次开发。本文就是记录如何二次开发Ueditor这个富文本编辑器的。首先本文不适合vue3.0以上,因为对应的Ueditor在系统中引入方式不同,仅介绍2.0及以下项目基于现有的按钮进行二次开发的Ueditor1.定义按钮在项目目录中找到此文件,搜索文件中的btnCmds把要添加的自定义的按钮名称写入。此处我的按钮名称为:tencentmap2.给按钮添加事件在当前js文件中: // 地图按钮 UE.registerUI('tencent原创 2021-12-14 14:43:22 · 1611 阅读 · 0 评论