![](https://img-blog.csdnimg.cn/20210608202211280.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Angular
分享angular10使用心得
你挚爱的强哥
我以为,世上的程序语言确实没有高低之分,只有编程的人才有强弱之别,通过写代码我们可以发现和认识一个真正的自己,因为我们真正的对手,可能就是我们自己。
展开
-
设置Angular路径别名用于ts、js、scss、less
angular.json>projects>...>architect>build>options>加入配置css别名路径。tsconfig.json的 "baseUrl": "./",同一级加配置ts别名路径。原创 2022-10-22 06:11:13 · 459 阅读 · 0 评论 -
别扯那没用的~全网最简洁方法~让Angular可以直接引入import本地的json文件
一般情况Angular默认不支持直接引入本地json,这点就真不如vue。在compilerOptions对象里面加入。这样就直接拿到json的内容了,很方便吧~在根目录找到tsconfig.json。原创 2022-07-14 22:18:12 · 467 阅读 · 0 评论 -
用Angular获取当前地址的路径path(也就是网址/#后面那坨url)
代码】用Angular获取当前地址的路径path(也就是网址/#后面那坨url)原创 2022-07-14 22:03:52 · 1943 阅读 · 2 评论 -
使用Form报错提示If ngModel is used within a form tag, either the name attribute must be set or the form
<form> <div> <input type="text" [(ngModal)]="value" > </div> <div> <button>保存</button> <button>取消</button> </div></form>会报错If ngModel is used wi.原创 2022-05-21 10:13:28 · 656 阅读 · 0 评论 -
Angular父组件调用子组件里面的方法
【代码】Angular父组件调用子组件里面的方法。原创 2022-04-26 01:18:47 · 3949 阅读 · 1 评论 -
Angular如何实现hash模式网址(就是那种带#的网址、井号url)
注意:方法二优先级高于方法一,如果同时设置{provide: LocationStrategy, useClass: PathLocationStrategy}和useHash:true,hash模式不会生效;同理,如果同时设置{ provide: LocationStrategy, useClass: HashLocationStrategy }和useHash:false,hash模式反而会生效原创 2022-04-15 22:17:48 · 966 阅读 · 0 评论 -
Angular打包构建项目服务器运行runtime.js、polyfills.js、vendor.js报错net::ERR_ABORTED 404 (Not Found),build修改为相对路径./
如果不采用相对路径,放在服务器根目录里面很可能资源文件访问必须要经过http://域名/项目名称/文件夹类似上面的目录,这将导致很多从根目录Nginx配置访问的index.html文件一直处于loading状态,且所有资源文件都报错404解决方案:在package.json里面 "build": "ng build", 修改为如下内容 "scripts": { ... "build":"ng build --base-href ./",... },原创 2022-04-11 20:06:08 · 3222 阅读 · 0 评论 -
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素(@ViewChild只能获取静态的固定DOM节点)
故事背景:有一天,强哥整了个动态渲染的列表代码如下app.component.html<ul> <li *ngFor="let item of items" #input> <input type="text" [value]="item"> </li></ul>app.component.tsitems = [1, 2, 3, 4, 5, 6];但是我要渲染6个input,如果.原创 2022-04-03 20:54:04 · 1996 阅读 · 1 评论 -
Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法,强制刷新数据渲染
在Javascript代码里,都是按照一定顺序来执行的,当轮到一个代码片段执行的时候,浏览器就只会去执行当前的片段,不会做任何其他的事情。所以有时候一些做得不是很好的网页,当点击了某个东西之后会卡住,Javascript的工作方式就是会导致这一现象原因之一!我们先回忆下曾经的AngularJS 什么时候用$apply() 还是那个问题,那我们到底什么时候需要去调用apply()方法呢?情况非常少,实际上几乎我们所有的代码都包在apply()方法呢?情况非常少,实际上几乎我们所有的代码都包在.原创 2022-03-31 12:31:52 · 2913 阅读 · 0 评论 -
Angular获取Location对象,获取当前网页url、hash、hostname、href、pathname、port、protocal
import { Component, OnInit } from '@angular/core';import { PlatformLocation } from '@angular/common';@Component({ selector: 'app-first', templateUrl: './first.component.html', styleUrls: ['./first.component.scss']})export class FirstComponent i.原创 2022-03-30 12:35:58 · 1517 阅读 · 0 评论 -
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
有一天,我写了一个自信满满的自定义组件myComponent,在多个页面import使用了,结果控制台给我来这个我特么裤子都脱了,你给我来这个提示是几个意思仔细一看 The Component 'MyComponentComponent' is declared by more than one NgModule什么鬼?说我的组件被多个模块使用?搞什么飞机,我就是要多个页面使用呀!!!于是乎查阅官方文档发现一个shared.module.ts的东东首先找一个干净的文件夹创建一原创 2022-03-29 22:43:54 · 3957 阅读 · 0 评论 -
快速创建Angular组件并定义传参、绑定自定义事件的方法
为了方便创建Component,请自行安装插件接下来就是创建组件需要绑定入参in和事件out(用于输出参数)运行效果如下(可以点击红色文字,就获取到了子组件传出的内容)原创 2022-03-27 11:09:42 · 816 阅读 · 3 评论 -
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
进入到当前路由的时候触发(即使返回的是false,用户并没有权限访问该路由,但是相应的模块会被加载)。:进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载。这里是指对应组件的代码)。在home里面写一个按钮点击跳转到localhost/,然后打开F12查看。:进入当前路由之后,离开之前触发。:离开当前路由离开的时候触发。:刚刚进入子路由触发。原创 2022-03-18 13:41:17 · 7066 阅读 · 1 评论 -
【拦截器】Angular10轻松实现请求头传参数,针对性不同情况下,拦截器HttpInterceptor的创建和使用
interceptor/req.interceptor.tsimport { Injectable } from '@angular/core';import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';import { Observable } from 'rxjs';import { tap } from 'rxjs/operators';原创 2022-03-17 13:06:08 · 5923 阅读 · 0 评论 -
Angular1.x入门级自定义组件(导航条)
<!DOCTYPE html><html lang="zh" ng-app="app"><head> <meta charset="UTF-8"> <title>百度导航条</title> <script src="../angular.js"></script> ...原创 2019-04-20 22:25:22 · 5141 阅读 · 0 评论 -
推荐一本Vue.js书籍给你们《Vue.js框架与Web前端开发从入门到精通》
少侠,我看你骨骼惊奇是万中无一的前端开发奇才弘扬中国编程文化的重任就交给你了我这里有本《Vue.js框架与Web前端开发从入门到精通》作者:舒志强(博主本人)原创 2021-11-06 14:41:54 · 8670 阅读 · 1 评论 -
使用ngNonBindable在Angular双向绑定数据的时候显示“{{参数}}“中的花括弧、花括号“{{}}”
<p ngNonBindable>使用ngNonBindable停止框架渲染计算“{{}}”</p><p >计算1+1= {{ 1 + 1 }}</p><p ngNonBindable>计算1+1= {{ 1 + 1 }}</p>渲染结果原创 2021-10-06 14:10:14 · 5221 阅读 · 0 评论 -
浅谈Angular如何自定义创建指令@Directive
知识普及Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分:模板指令——组件就是模板指令(只能自定义)属性型指令—— 更改元素、组件或其他指令的外观或行为的指令(有内置和自定义两类)结构型指令—— 通过添加和删除 DOM 元素来更改 DOM 布局的指令(有内置和自定义两类)举例:内置属性型指令常用的有:NgClass —— 添加和删除一组 CSS 类NgStyle —— 添加和删除一组 HTML 样式NgModel —— 将数据双向绑定添加到 HTML 表...原创 2021-10-06 08:34:38 · 6036 阅读 · 0 评论 -
【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能
原创 2021-10-04 08:23:10 · 6453 阅读 · 0 评论 -
[推荐]Angular File Changer (Supporting Touch Bar and NgRx)→用于快速切换同名HTML/SCSS/TS文件,非常的实用
注释:尽管上面的配置是.css 用Alt+C,实际上当发现没有关联的css的时候,会默认切换到对应同名的scss文件原创 2021-10-03 13:50:37 · 5257 阅读 · 0 评论 -
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx¶m2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
app.component.html<button (click)="location.replaceState('/a/a/','?id=1&pageIndex=2&pageSize=10#hashValue');path1=this.location.path(true);path2=this.location.path(false)">修改当前浏览器url参数</button><p>【含hash的url】{{path1}}</p>原创 2021-10-01 10:39:11 · 6065 阅读 · 0 评论 -
ng-template、ng-container、ng-content和ngTemplateOutlet、ngProjectAs傻傻分不清!他们究竟是干啥的???
一句话描述三者的作用:ng-template是备胎:通常在html里面作为备用模板,当绑定了对应的#标记的时候才会显示ng-content是替身:通常出现在子组件中,用于替代显示子组件在父组件中><尖括号包裹的内容传递ng-container是舔狗:包裹的内容显示,而自身标签不会出现在html中...原创 2021-09-29 00:40:30 · 5613 阅读 · 0 评论 -
设置VSCode Git签出分支快捷键Alt+G
按住Alt+G,就可以切换分支了,灰常方便!~原创 2021-09-26 22:21:56 · 5973 阅读 · 0 评论 -
【实用】Angular中如何实现类似Vuex的全局变量状态变化功能?
ng g s storagestorage.service.tsimport { Injectable } from '@angular/core';@Injectable({ providedIn: 'root'})export class StorageService { constructor() { } text: any = '初始值'; color: any = 'gray';}app.component.html、app.component..原创 2021-09-25 01:08:17 · 5847 阅读 · 0 评论 -
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
纯管道和非纯管道是相对于管道所传的参数(如上例的 filterKey)而言的。如果管道是纯管道,只监听基本类型的参数的变化或者引用类型引用的变化(a primitive input value (String,Number,Boolean,Symbol) or a changed object reference (Date,Array,Function,Object));然而, 对于非纯管道,不管是基本类型参数的改变还是引用类型内部数据变化(而非引用变化)都可以触发管道。@Pip...原创 2021-09-22 08:15:32 · 5632 阅读 · 0 评论 -
Angular给HTML节点绑定自定义属性和变量,用于设置一些动态的状态变化非常有用!
app.component.html<h1 [attr.color]="color">内容</h1>app.component.tscolor='red';app.component.scss[color='red']{ color: red;}实际效果原创 2021-09-21 19:20:47 · 5647 阅读 · 0 评论 -
善用Angular的ngOnChanges和ngDoCheck生命周期钩子函数实现Vue中类似watch的功能(监听数据变化)
ngOnChanges主要用于组件的@Input变量监听app.component.html<input type="text" [(ngModel)]=text><input type="text" [(ngModel)]=text2><app-change [text]="text" [text2]="text2"></app-change>这里如果遇到ngModel绑定报错,请前往此处解决解决Angular里面报错:error...原创 2021-09-21 16:40:00 · 5882 阅读 · 0 评论 -
解决Angular里面报错:error NG8002: Can‘t bind to ‘ngModel‘ since it isn‘t a known property of ‘input‘.
以上是报错内容([(ngModel)]双向绑定失效)解决办法:在module.ts中添加import { FormsModule } from '@angular/forms';imports:[FormsModule,...],这样就可以使用[(ngModel)]双向绑定了原创 2021-09-21 15:04:12 · 6683 阅读 · 0 评论 -
Angualr设置自定义管道Pipe(类似Vue的过滤器filters)货币格式化(实现内置管道CurrencyPipe的功能)
新建管道:ng g pipe pipes/moneypipes/money.pipe.ts,同时在父级module.ts加入import{MoneyPipe}from'./pipes/money.pipe';@NgModule({declarations:[ ... ]})里面加入MoneyPipeimport { Pipe, PipeTransform } from '@angular/core';@Pipe({ name: 'money' })exp...原创 2021-09-20 23:22:34 · 5417 阅读 · 0 评论 -
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
app.component.html<sg [in]='"传输进入"' (out)="out($event)" ></sg>app.component.tsimport { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html'})export class AppComponent { out($ev原创 2021-09-20 19:43:13 · 5601 阅读 · 0 评论 -
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步https://angular.cn/guide/router1、嵌套路由const routes: Routes = [ { path: 'first', component: FirstComponent,//同步加载 //这就是嵌套路由↓ children:[ {path:'first-sub1',component:firstSub1Component}, {path:'first-sub2',componen.原创 2021-08-05 23:20:57 · 6150 阅读 · 0 评论 -
ng命令汇总:Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本.安装要安装Angular CLI你需要先安装node和npm,然后运行以下命令来安装最新的Angular CLI:注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持。npminstall -g angular-cli在 Mac 或 Linux 平台上,你可能需要添.原创 2021-08-05 22:45:35 · 5512 阅读 · 0 评论 -
【必备】VSCode开发Angular的必备插件
TSLint:Typescript语法检查 Prettier:代码格式化 IntelliJ IDEA Keybindings:IDEA风格的快捷键 Angular 7 Snippets:Angular语法填充(标签) Angular Files:生成Angular的文件模板(Component、Module、Pipe等等) Angular Follow Selector:文件跳转(Component跳转到html、scss文件) Angular..原创 2021-07-29 23:07:12 · 7073 阅读 · 0 评论 -
1分钟入门angular动画效果animations,敲简单滴哟~~☺
运行代码创建componentng g c animate-test然后在app.module.ts做如下引入分别是下面两行,自行引入import {BrowserAnimationsModule} from '@angular/platform-browser/animations';//注意这个很重要BrowserAnimationsModule,//注意这个很关键,没有引入动不起来接下来傻瓜式拷贝代码animate-test.component.h...原创 2021-07-09 08:24:23 · 5505 阅读 · 2 评论 -
【请求后台接口】30秒完成Angular10精简版HttpClient请求服务搭建
ng g s services/http原创 2021-06-21 21:08:14 · 5231 阅读 · 0 评论 -
设置Open in Terminal快捷键Alt+Shift+Z,方便angular项目的各种命令输入(多任务状态下)
Ctrl+Shift+S原创 2021-06-13 16:16:43 · 5413 阅读 · 0 评论 -
【亲测可用→防止入坑Routes】设置angular10项目异步加载、惰性加载、懒加载路由
创建一个带路由的项目ng n RouingApp --routing原创 2021-06-13 16:55:23 · 5600 阅读 · 0 评论 -
开启angular10第一个项目
npm install -g @angular/cli@10完事儿后,输入ng --version验证是否安装完毕,出现如下内容代表安装成功然后,创建一个ng10的项目ng new projectName简写ng nprojectName原创 2021-06-08 20:18:13 · 5066 阅读 · 0 评论