angular
文章平均质量分 53
李卓书
这个作者很懒,什么都没留下…
展开
-
angular 中引入html单页面
注:参数间用逗号分隔,导入的php文件含有一个传递参数,类似于:test.php?因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。然后补充下angular中的用法,在angular中使用a标签,利用target=“xxxxx” 可以进行路由。//导入的php文件含有一个传递参数,类似于:test.php?1 我们首先来回忆下,我们在原生中,如何在一个Html中引入另一个html页面。url:是指要导入文件的地址。原创 2022-09-21 00:21:47 · 1613 阅读 · 0 评论 -
angular之formgroup
最后检查发现啊,是clsChange事件没有触发,但是我们知道ngmodelchange是angular内置的绑定事件,在patchvalue中是会被触发的。属性是继承 AbstracControl,下面翻译一下:(这里要说明一下,这里翻译的,都是针对formgroup的,因为对于formArray,formControl可能是不同的)这里呢,在构造函数里,用valueChanges进行数据监控,当name里的数值发生变化时,会订阅这个回调函数。其实,编辑要做的就是回显以及初始化数据之后的联动。原创 2022-08-21 17:43:02 · 3068 阅读 · 0 评论 -
angular 安装记录
代码】angular 安装记录。原创 2022-08-17 23:44:34 · 161 阅读 · 0 评论 -
【精】ng-template的深入浅出
本文旨在帮助初学者更好的理解angular中模版的使用方法。ng-template 指令代表一个 Angular 模板:这意味着该标签的内容将包含模板的一部分,然后可以将其与其他模板组合在一起以形成最终的组件模板。我们经常在动态组件中使用到模版,比如一个弹出框,弹出框里的内容是不同的,但是框体的外部是一样的,比如头部,关闭按钮,确定和取消按钮等。1 模版包裹的内容默认是不显示的,一般通过ngIf去判断是否渲染出来2 模版变量的使用,我们可以在模版上,通过#的方式,定义一个模版变量,这个模版变量可以在h原创 2022-06-05 21:42:36 · 1262 阅读 · 0 评论 -
angular中ng-container、ng-content和ng-template的用法
鉴于angular中对ng-template的说明比较分散,这里专门对ng-template进行解析说明,并总结相关的几个关联性指令。说明:在官方文档中,我们一般会在哪些地方看到ng-container呢?没错,在内容投影!当然大概率也会在内置指令和模版变量中有它的身影。但是,最为经典的,还是在内容投影中的释义。简而言之:ng-container标签的使用,不会在dom中产生标签 举个例子:如下比如说,我们定义一段代码,如上所示。我们把详细资料放到ng-container里面,我们看一下元素的dom原创 2022-06-05 20:26:08 · 3796 阅读 · 0 评论 -
【精】angular之组件交互全方位总结及示例探讨
关于angular在国内使用的市场份额很少,所以百度出来的答案基本都是官网上的三板斧,很少有借鉴意义。所以这里我把大概收集到的知识点进行总结并扩展。组件交互总共分为以下几点:(这里还是借鉴官网的说法)在开始讲解之前,看下我的目录结构1 父传子之输入型绑定我们通过模版传参的形式,从父组件传递到子组件首先,我们在根组件中,调用父组件然后,我们在父组件中调用子组件这样的话,我们就完成了父子组件的一个测试环境。假设我们在父组件中,定义一个变量,要传到子组件中,那么怎么办呢?我们这样首先定义一个原创 2022-06-01 01:02:18 · 523 阅读 · 1 评论 -
angular 服务的作用域
服务是angular抽离出来处理数据逻辑的一个文件,服务通常是单例的;使用服务,我们可以轻松实现跨模块跨组件共享数据,而这些是取决于服务的作用域的1 在根注入器中注册服务,所有模块使用同一个服务实例对象2 在模块级别注册服务,在该模块中的所有组件使用同一个服务实例3 在组件级别去注册服务,那么只能在组件及其子组件域内使用这里需要先解释一下下面的用法估计上面的解释会有一些模糊,下面写一些例子1 关于在根模块中注册服务的例子首先,我们建立一个服务其中provideIn:‘root’,这里就表示是原创 2022-05-31 22:30:27 · 369 阅读 · 0 评论 -
angular-父子组件传递参数
父传子父组件<child name="小明"></child>子组件export class child implements OnInit { @Input() name:string = "" constructor() { } ngOnInit(): void { console.log(this.name);//小明 }}这里说明下,@Input(“name”) name:string = “”;本来应该是上面的写法的,但是由于n原创 2022-05-31 21:36:02 · 542 阅读 · 0 评论 -
angular 依赖注入
打个比方。我们每家都要上网,上网是要用到光猫的。假设联通公司,提供了一个光猫,是这样的。class guangmao{ constructor(){} surfing(){console.log("你能上网了)}}联通公司已经帮你拉好了宽带,你直接调用就可以上网了,你这样做了class shangwang{myguangmao:guangmao;constructor(){this.myguangmao = new guangmao();_surfing(){this.myguang原创 2022-05-31 16:02:57 · 221 阅读 · 0 评论 -
angular 架构
架构一览angular是重量级的框架,内部集成了大量开箱即用的功能模块。模块angular应用是由一个个模块组成的,此模块不是esmodoule,而是ngmoddule,是angular模块ngmodule是一组相关功能,专注于某个应用领域,可以将组件和一组组相关代码关联起来,是应用组织代码结构的一种方式。ngmodule是由ngmodule装饰器函数装饰的类。服务用来放置和特定组件无关并希望跨组件共享的数据或逻辑。这里需要特别说明一点:以下方式是错误的使用方式。import {Apps原创 2022-05-30 22:37:56 · 3924 阅读 · 0 评论 -
angular HttpClientModule
angular 路由拦截拦截器原创 2022-05-15 15:04:03 · 396 阅读 · 0 评论 -
angular RxJs
Rxjs原创 2022-05-15 12:15:19 · 1239 阅读 · 0 评论 -
【精】angular.json配置详解【angular12】
angular.json原创 2022-05-13 15:12:33 · 2603 阅读 · 0 评论 -
angular 路由懒加载
说明需要哪个模块就加载哪个模块,可以减少打包的体积实现1 用命令创建ng g m user --routing=true 创建用户模块并自动创建路由ng g c user/pages/login 创建登录组件ng g c user/pages/register 创建注册逐渐2 在根模块中引用子模块这里意思就是只有在访问到/user模块下的组件时,才会加载,可以查看下network里面是不是点击才加载的...原创 2022-05-11 15:49:47 · 589 阅读 · 0 评论 -
angular 路由插座
说明为了让子路由能够同时显示出来代码原创 2022-05-11 15:09:37 · 198 阅读 · 0 评论 -
angular 路由传参
查询方式传参 <a href="" routerLink="/about" [queryParams]='{"nihao":"d dod f"}'>关于我们</a>import { Component, OnInit } from '@angular/core';import { ActivatedRoute } from '@angular/router';@Component({ selector: 'app-about', templateUrl: './ab原创 2022-05-11 14:39:43 · 1307 阅读 · 0 评论 -
angular 路由及自定义路由
创建1 在ng new xxx时,可以选择路由模块2 通过 ng new routing-app --routing --defaults创建带有路由的应用 如下所示基本配置自定义路由的配置routing-moudle模块import { NgModule } from '@angular/core';import { RouterModule, Routes, UrlSegment } from '@angular/router';import { ProfileComponent }原创 2022-05-11 13:46:29 · 725 阅读 · 0 评论 -
angular 管道
说明用来处理数据的常用的Pipe(管道)函数管道功能DatePipe格式化日期JsonPipeJSON.stringify()化后输出UpperCasePipe转大写LowerCasePipe转小写DecimalPipe将数值按照特定的格式显示CurrentcyPipe数值货币化处理SlicePipe数组或者字符串裁剪成新子集PercentPipe转成百分比格式DatePipe格式化日期DatePipe格式化原创 2022-05-11 01:18:03 · 938 阅读 · 0 评论 -
angular 自定义表单验证
说明前端校验基本是每个开发者必须具备的能力,除了我们自己用一些插件去做一些校验外,比如vue中就需要自己引入一些库去做。那么angular给我们内置了哪些了?其实angular内置也好,不用我们 自己去捣鼓,但是用是感觉很一般吧。例子1 一个简单的账户、密码、手机号的界面及代码import { Component } from '@angular/core';import { FormControl, FormGroup, FormBuilder, Validators } from '@angu原创 2022-05-11 01:00:49 · 2248 阅读 · 1 评论 -
angular表单
表单元素有哪些form: 定义供用户输入的表单。 fieldset: 定义域。即输入区加有文字的边框。 legend:定义域的标题,即边框上的文字。label:定义一个控制的标签。如输入框前的文字,用以关联用户的选择。 input:定义输入域,常用。可设置type属性,从而具有不同功能。 textarea: 定义文本域(一个多行的输入控件),默认可通过鼠标拖动调整大小。button: 定义一个按钮。 select: 定义一个选择列表,即下拉列表。 option: 定义下拉列表中的选项。原创 2022-05-11 00:55:11 · 430 阅读 · 0 评论 -
angular 表单验证
angular表单验证原创 2022-05-10 11:27:03 · 1747 阅读 · 0 评论 -
angular 表单控件组
import { Component } from '@angular/core';import { FormGroup, FormControl } from '@angular/forms';@Component({ selector: 'app-root', // templateUrl: './app.component.html', template: ` <form [formGroup]="loginForm"> 账号: <input t原创 2022-05-10 10:53:46 · 312 阅读 · 0 评论 -
angular 服务
angular 服务和依赖注入原创 2022-05-09 21:53:52 · 1569 阅读 · 0 评论 -
angular视图封装
angular视图封装原创 2022-05-07 18:10:42 · 454 阅读 · 0 评论