Angular自学笔记（?）属性型指令

最新推荐文章于 2022-06-18 20:52:01 发布

yusirxiaer

最新推荐文章于 2022-06-18 20:52:01 发布

阅读量152

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular自学笔记

本文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/113828619

Angular自学笔记专栏收录该内容

15 篇文章 ¥9.90 ¥99.00

订阅专栏

这篇博客介绍了Angular中属性型指令的基本概念，强调组件作为特殊指令的角色，并提供了一个示例来展示其用法。

基本概念

用于改变DOM元素的外观或行为的指令

组件是一种特殊的指令

import {
   
   Component} from '@angular/core';
@Component({
   
   
  selector: 'app-root',
  template:

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yusirxiaer

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

Angular自学笔记（?）结构型指令

YUSIR 完美CODING世界

02-16

156

内置指令的展开写法 ngIf import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <button (click)="show = !show">toggle</button> <p *ngIf="show as aa">一段文字 {{ aa }}</p> <ng-template [ngIf]="sho

Angular自学笔记（?）依赖注入

YUSIR 完美CODING世界

02-17

192

什么是依赖注入依赖注入（DI）是一种设计模式, 也有相应的框架，比如InversifyJS Angular 有自己的 DI 框架, DI 框架会在实例化该类时向其提供这个类所声明的依赖项带修饰符的参数在ts中，一个类的参数如果带上修饰符，那个参数就变成了类的实例属性 class Mobile { constructor(readonly name: string = '小米') {} logName() { console.log(this.name); } } 上面的name

参与评论您还未登录，请先登录后发表或查看评论

ngx-highlightjs：Angular语法高亮模块

02-05

Angular Highlight.js 即时代码高亮显示，自动检测语言，超级易用目录 | import { HighlightModule , HIGHLIGHT_OPTIONS } from 'ngx-highlightjs' ; @ NgModule ( { imports : [ HighlightModule ] , providers : [ { provide : HIGHLIGHT_OPTIONS , useValue : { fullLibraryLoader : ( ) => import ( 'hi

angular2-highlight-js:Highlight.js与Angular集成

05-17

angular2-highlight-js 与Angular的集成。快速链接安装 npm install --save angular2-highlight-js@latest highlight.js 用法在angular.json中将您要使用的样式的highlight.js css添加到应用程序的样式中。 " styles " : [ " ./node_modules/highlight.js/styles/monokai-sublime.css " , ... ], 在app.module.ts中，导入Highlight.js库和您要突出显示的任何语言。 import { registerLanguage } from 'highlight.js' ; import javascript

angular5中的自定义指令（属性指令）

diaobei9747的博客

07-05

366

属性型指令用于改变一个 DOM 元素的外观或行为。在 Angular 中有三种类型的指令：组件 — 拥有模板的指令结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。在cmd的命令窗口里面执行命令：ng generate directive highlight ...

Angular自学笔记（?）生命周期

YUSIR 完美CODING世界

02-17

165

从实例化组件，渲染组件模板时，各声明周期就已开始 ngOnChanges 输入属性发生变化是触发，但组件内部改变输入属性是不会触发的 import { Component, Input, OnInit, OnChanges } from '@angular/core'; @Component({ selector: 'app-life-cycle', templateUrl: ` 点击按钮不会触发ngOnChanges <button (click)="title = '

Angular自学笔记（?）ViewChild和ViewChildren

YUSIR 完美CODING世界

02-16

247

ViewChild 最好在ngAfterViewInit之后，获取模版上的内容获取普通dom import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; @Component({ selector: 'app-view-child', template: ` <section> <h3>获取dom</h3>

angular自学笔记

MonsterK666的博客

08-31

1249

Angular 一、初步上手 1.1、介绍 Angualr是谷歌开发的一款开源的web前端框架，诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google 的多款产品当中。根据项目数统计angular (1.x 、2.x 、 4.x、5.x、6.x、7.x 、8.x、9.x）是现在网上使用量最大的框架。 Angular基于TypeScript，和react、vue相比 Angular更适合中大型企业级项目。目前2019年12月25日a

Angular自学笔记（?）ContentChild和ContentChildren

YUSIR 完美CODING世界

02-16

371

ContentChild 用法类似ViewChild, 获取投影中到组件或指令还有元素dom等获取投影中但组件 import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; @Component({ selector: 'app-content-child-panel', templateUrl: './content-child-panel.component.html' }) ex

Angular自学笔记（一）ngModule 元数据

YUSIR 完美CODING世界

02-16

377

工作硬上开发angular项目，好难啊，上网搜资料教程真的贼少，吐槽真的没什么人用angular，自己学习到处搜集整理的笔记，分享出来，方便查看理解总结。应该适用于angular11系列（更新真快，反正我也不知道之前低版本不同手动狗头）什么是angular module(ngModule)? angular module就是一个普通的类，但是这个类，一旦被@NgModule所装饰，那这个类就可以被称为angular module @NgModule元数据 @NgModule 获取一个元数据对象，它会告

angular 自学笔记

zezeadede555的博客

05-30

243

angular 自学笔记 1、安装node.js node –version查看版本 2、查看node已安装列表 npm list –depth=0 –global找到npm安装的位置加入环境变量 3、安装angular Cli npm install –g @angular/cli cnpm i –g angular-cli 安装成功后可进行查看 n...

Angular CLI ng 指令指南

YUSIR 完美CODING世界

01-25

2165

Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装要安装Angular CLI你需要先安装node和npm，然后运行以下命令来安装最新的Angular CLI：注意：Angular CLI 需要Node 4.X 和 NPM 3.X 以上

useEffect中使用异步函数

YUSIR 完美CODING世界

06-18

1591

useEffect是不能直接用 async await 语法糖的

Angular自学笔记（?）TemplateRef和ViewContainerRef

YUSIR 完美CODING世界

02-16

605

ElementRef 由于ng是跨平台的为了减少视图层和渲染层的耦合也为了让ng更适应多平台，ng帮我们封装了ElementRef，我们可以通过ElementRef拿到native元素(在浏览器中也就是我们常说的DOM元素) 下面我们看一段代码 import { Component, ElementRef, AfterViewInit } from '@angular/core'; @Component ({ selector:'my-app', t

Angular rxjs operators 笔记

YUSIR 完美CODING世界

02-16

519

toArray /* toArray把结果都塞到数组里去 */ const source = interval(1000); const example = source.pipe( take(10), toArray() ); example.subscribe(val => console.log(val)); // output: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] toArray /* pairwise把相邻的两个流组成数组 */

Angular 内容投影 II

YUSIR 完美CODING世界

12-06

319

内容投影是一种模式，你可以在其中插入或投影要在另一个组件中使用的内容。简单来说，angular的内容投影就相当于vue的内容插槽slot。所有一下就能懂了。 1、单插槽内容投影单插槽内容投影是指创建一个组件，你可以在其中投影一个组件。如果只有一个ng-content，不需要select属性。 2、多插槽内容投影一个组件可以具有多个插槽。每个插槽可以指定一个 CSS 选择器，该选择器会决定将哪些内容放入该插槽。将select属性添加到<ng-content>元素。 Ang...

Angular rxjs Subject笔记

YUSIR 完美CODING世界

02-16

277

BehaviorSubject /* ehaviorSubject接受一个默认参数，相当于new Subject后自动next('aa') 之后到行为和Subject一致 */ const behave = new BehaviorSubject('aa'); behave.subscribe(res => { console.log(res); // aa bb }); behave.next('bb'); // 获取最新到值 behave.getValue(); // 'bb' be

Angular自学笔记（?）DI提供者

YUSIR 完美CODING世界

02-17

252

类提供者类提供者的创建和使用假设有logger类： import { Injectable } from '@angular/core'; @Injectable() export class LoggerService { logs: string[] = []; constructor() { } log(message: string) { this.logs.push(message); console.log(message); } } 类提供者，使用us

Angular中属性型指令的使用举例

08-09

Angular中的属性型指令是一种能够通过元素的属性来修改元素的行为或样式的指令。我们可以在HTML中使用这些指令来动态改变元素的属性。举个例子，假设我们有一个按钮元素，并且想要在按钮上添加一个背景颜色的指令...