一、 id选择器 1、 文件 app.hightlight.directive.component.ts ： import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '#appHightLight', }) export class AppHightLightDirective { constructor(private
避免生成css ng g c xxx --style=none 数据结构渲染Form表单 import {Validators} from "@angular/forms"; const dateForm = { sex: {value: null, required: true, maxLength: 10}, gender: {value: 20, required: true,}, } interface formObj { value: null | stri
记第一篇笔记 hell OwO rld 最近公司有一点点小需求，做个另类的表格，要求动态的样式(PS:不能直接写死那种)，没办法打工人只能硬着头皮去干。 网上传的一些写法： controller.js: $scope.test = [
#、什么是 angular Angular是基于typescript构建的开发平台，它包括： 一个基于组件的框架，用于构建可伸缩的 Web 应用 一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信等 一套开发工具，可帮助你开发、构建、测试和更新代码 它用于构建Web /移动和桌面应用程序，是由
三大框架，本质都是基于js的web应用（前端做的都是web应用包括移动）框架，他们都是帮助我们解决问题的工具，具体用哪个，要结合具体场景。 这三者中，Angular的适用领域相对窄一些，React可以拓展到服务端，移动端Native部分，而Vue因为比较轻量，还能用于业务场景非常轻的页面中。 在Web应用中，我们
1. 全局安装 $ npm install -g @angular/cli // 查看是否安装成功 $ ng v // 出现下面，则成功 ... Angular CLI: 13.2.5 Node: 16.13.2 Package Manager: npm 8.3.2 OS: win32 x64 ... 2. 新建项目 // 第一步 $ ng new my-app // 第二步 // 1. 选择是否需要routing，也就是路由
1、创建拦截器 import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, } from '@angular/common/http'; import { Observable } from 'rxjs'; export class AddHeaderInterceptor implements HttpInterceptor { intercep
1.安装node.js + angular cli 2.新建个项目@angular/cli 3.基础命令 1.安装node.js + angular cli node下载地址：https://nodejs.org/zh-cn/ node，安装完，配置国内镜像仓库 angular安装： 2.新建个项目@angular/cli 全局安装脚手架npm install -g @angular/cli 查看安
目录声明引入模块服务此模块将生成的根组件动态生成的组件出口去掉测试文件模块的使用combineLatestts技巧angular 各版本的兼容FormArray 倒序删除一种有效取消订阅的方式服务的使用组件传入的参数varDomSanitizer 防止XSS攻击HostBinding 声明 declarations: [AppComponent] 组
https://blog.csdn.net/qq_38744335/article/details/89227168?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_releva
$watch方法，它可以帮助我们在每个scope中监视其中的变量。 $watch 单一的变量 对于普通的变量时，如数字，字符串等，直接如下写是可以监视到变量的变化，并执行相应的函数的。 $scope.count=1; $scope.$watch('count',function(){ ... }); 1 2 3 4 $wa
Angular 的使用注意点 第一部分 命令工具 第二部分 1.组件，组件树生成器,理清个组件脉络 Angular2-dependencies-graph 模块 Router 本质上表示的是当前页面的状态 第三部分 依赖注入： 构造器注入 数据绑定： 第四部分. UI库 5. 参考示例（项目案例）
前言： 之前在安装Angular环境的时候有个问题，就是通过命令成功安装了angular cli脚手架工具，但是在终端（win+r cmd）中输入ng version一直提示的是'ng' 不是内部或外部命令，也不是可运行的程序或批处理文件，然后重复删除安装了多次都是一样，最后发现原来没有添加到系统盘的环境变
1、angular如何以及何时根据数据模型更新html 答：angular使用zone.js来进行变更检测，zone是一个跨异步任务持久化存在的执行上下文，同时angular提供了NgZone服务类，来在组件中使用zone的能力 a、执行时机：会在angular组件初始化、触发DOM事件、数据请求、宏任务、微任务、其他异
由于官网无法登陆所以参考csdn angular拖拽案例 滚动条属性设置 需求：把ng-zorro表格头部做成可拖拽的形式 思路：拖拽表格最简单的实现就是把表格的元素设计成数组渲染，通过改变数组元素来渲染表头，上代码 APP.component.html <nz-table #basicTable [nzData]="listOfData" [nzPa
原文链接：这里 0.前言 上一篇文章中简单介绍了angular中的默认路由，以及访问的方式，这篇文章继续介绍，我们一般可以通过哪些方式来经过路由访问页面。 用户除了通过直接访问URL链接之外，还有其他访问页面的方式。 1.通过路由链接（routerLink） 路由链接类似于超链接一样，直接写在HTML页面。
最近在升级公司的Angular项目，项目使用Angular-Cli搭建，UI使用Angular Metarial库和懒加载路由，Angular版本由v10升级到v13。 升级指导：https://update.angular.io/ 问题：升级之后ng serve编译非常慢 仅仅启动都要用到90s+ 开发过程中的重构时间也变长了，任何一个小的改动，哪怕仅
原文链接：这里 0.前言 前一段时间折腾angular的路由折腾的够呛， 这篇文章简单介绍一下自己的理解及用法。 1.路由的功能及原理 一开始并不理解路由的存在，因为学习html的时候，访问模式是下面这样子： 也就是网址会直接访问到我们的页面。那这样有不好吗？或者说有什么问题吗？一个小demo确
原文链接：这里 0.前言 项目中最近要使用echarts做那种看起来高大上的图。于是搞起了echarts。本文主要介绍angualr中如何使用echarts。 anuglar CLI 11.5 1.新建angular项目 新建项目参考：angular从0到1：环境安装及运行 – 每天进步一点点 (longkui.site) 2.引入echarts 我们安装echa
原文链接：这里 0.前言 前面介绍了ngIf的基本用法。这篇文章中简单介绍下angular中组件和标签的显示与隐藏，主要介绍ngIf、ng-show、ng-hide、hidden。注，本文和网上其他测试结果不一定一样，我查询了很多文章，但是没有效果没有正常实现，不确定是版本问题还是写法问题。 1.用法对比 <d
原文链接：这里 0.前言 在HTML中经常需要遍历文件，angular中自带的for语法 *ngFor ，这篇文章中主要介绍 *ngFor的用法。 1.用法介绍 HTML： <p>基础用法</p> <div *ngFor="let item of student1"> {{item}} </div> <p>带索引</p> <div *ngFor="let it
原文链接：这里 0.前言 angular中的if在，一种是 *ngIf=”expression” ,一般写在html中。这篇文章主要记录*ngIf的几种用法。 1. ngIf用法 1.1可以用作显示和隐藏 HTML <div *ngIf="isShow" > 窗前明月光 </div> <button (click)="change()">显示/隐藏</button> TS
原文链接：这里 0.前言 前面的文章中简单介绍了angular中样式文件的用法。这偏文章主要介绍angular中事件，本文中以click事件为例。 1.简单用法 HTML <button (click)="click1()"> 点击1 </button> <button (click)="click2($event)">点击2</button> TS import { Com
原文链接:这里 0.前言 写代码最讨厌的一件事就是写css，真的是难啊。不过还是要写，这篇文章主要记录angular中样式的不同写法。具体演示的是[ngclass]。本文为了表示更加清除，没有使用template模板 1.引用css文件(最原始方法) TS文件： import { Component, OnInit } from '@angular/
原文链接：这里 0.前言 我们要显示数据就数据绑定，angular中的数据绑定语法比较多。 按数据流的方向可以分为三类： 从数据源到视图 从视图到数据源 双向：视图到数据源到视图 按照绑定类型可以分为三类： 第一类从数据源到视图，格式一共有三种： {{expression}} [target]="expression" bin
