当前位置: 首页 > news >正文

Angular笔记(二)组件

  • 组件包括:
  • HTML 模板: 声明页面渲染的内容
  • TypeScript 类: 定义行为
  • CSS 选择器: 定义组件在模板中的使用方式
  • (可选)要应用在模板上的 CSS 样式

一、 创建组件:

  1. 使用 Angular CLI 创建一个组件
ng generate component <component-name>

得到文件夹:
组件文件 <component-name>.component.ts
模板文件 <component-name>.component.html
CSS 文件<component-name>.component.css
测试文件 <component-name>.component.spec.ts

  1. 指定组件的 CSS 选择器

每个组件都需要一个 CSS 选择器。选择器会告诉 Angular:当在模板 HTML 中找到相应的标签时,就把该组件实例化在那里。

@Component({selector: 'app-component-overview',
})
  1. 定义模板,声明样式

为组件定义模板:引用外部文件,或直接写在组件内部
为组件声明样式:引用一个外部文件,或直接写在组件内部

//外部文件:
@Component({selector: 'app-component-overview',templateUrl: './component-overview.component.html',styleUrls: ['./component-overview.component.css']
})
//内部
@Component({selector: 'app-component-overview',template: `<h1>Hello World!</h1><p>This template definition spans multiple lines.</p>`styles: ['h1 { font-weight: normal; }']
})

二、生命周期

func用途notestasks
ngOnChanges()当 Angular 设置或重新设置数据绑定的输入属性时响应接受当前和上一属性值的 SimpleChanges 对象
ngOnInit()初始化指令/组件在第一轮 ngOnChanges() 完成之后调用,只调用一次。即使没有调用过 ngOnChanges(),也仍然会调用1. 获取初始数据 2. 设置输入属性初始化指令
ngDoCheck()检测
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()初始化完组件视图及其子视图或包含该指令的视图之后调用只调用一次
ngAfterViewChecked()
ngOnDestroy()销毁指令/组件之前调用并清扫在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。1. 取消订阅可观察对象和 DOM 事件 2. 停止 interval 计时器 3. 反注册指令在全局或应用服务中注册过的所有回调

相关文章:

Angular笔记(二)组件

组件包括&#xff1a; HTML 模板: 声明页面渲染的内容TypeScript 类: 定义行为CSS 选择器: 定义组件在模板中的使用方式&#xff08;可选&#xff09;要应用在模板上的 CSS 样式 一、 创建组件: 使用 Angular CLI 创建一个组件 ng generate component <component-name>…...

微信小程序|基于小程序+C#制作一个超酷的个人简历

你还在用以前的方式投简历吗?趁着金三银四来临之际,跟随此文使用小程序制作一个便携超酷的个人简历,高调炫技,愉快的收offer吧! 一、小程序...

华为OD机试 - 最快到达医院的方法(Java JS Python)

题目描述 新型冠状病毒疫情的肆虐,使得家在武汉的大壮不得不思考自己家和附近定点医院的具体情况。 经过一番调查,大壮明白了距离自己家最近的定点医院有两家。其中: 医院A和自己的距离是X公里医院B和自己的距离是Y公里由于武汉封城,公交停运,私家车不能上路,交通十分不…...

92.【SpringCloud NetFilx】

SpringCloud(一)、这个阶段该如何学习?1.微服务介绍2.面试常见问题(二)、微服务概述1.什么是微服务?2. 微服务与微服务架构(1).微服务(2).微服务架构⭐(3). 微服务优缺点(4). 微服务技术栈有那些&#xff1f;(5). 为什么选择SpringCloud作为微服务架构(三)、SpringCloud入门概…...

[ahk]如何载入Scite的会话Session文件

加载session文件的AutoHotkey代码&#xff1a;oSciTE : ComObjActive("SciTE4AHK.Application") messageloadsession:d:\\ddd\\2023-2-15SciTE.session oSciTE.SendDirectorMsg(message)存储session文件的AutoHotkey代码&#xff1a;messagesavesession:d:\\ddd\\123…...

MyISAM和InnoDb的区别

MySQL 5.0以后的版本默认的存储引擎为InnoDb&#xff0c;之前是MyISAM。 现在说说两者的区别&#xff1a; 1.数据存储结构的不同 MyISAM存储文件&#xff1a;.MYD(存储表数据)&#xff0c;.MYI(存储表结构)&#xff0c;.FRM(存储表结构) InnoDb存储文件: .FRM(存储表结构)&am…...

K8s管理应用生命周期-Deployment篇

在k8s中部署应用程序流程 1、使用Deployment部署Java应用 kubectl create deployment web --imageXXX/java-demokubectl get deployment,pods 2、使用Service发布Pod kubectl expose deployment web --port80 --typeNodePort --target-port8080 --namewebkubectl get servic…...

类和对象(下)(二)

类和对象&#xff08;下&#xff09;&#xff08;二&#xff09;1.友元1.1友元函数1.2友元类2.内部类3.拷贝对象时的一些编译器优化&#xff08;vs2022&#xff09;&#x1f31f;&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f;&#x1f31f; &#x1f680…...

MapBox-draw绘制插件的使用教程(含修改样式和方法封装)

mapbox-draw插件是官方推荐的用于支持在mapbox地图中绘制图形的插件库。好像并不是由官方编写的,但是官方觉得其好用就直接推荐大家也使用了,我用了2天感觉下来还是觉得很鸡肋。对于开发者来讲自由修改的程度不是很高。这篇文章简单说一下对于mapbox-draw的使用和修改。 第一…...

使用 ONLYOFFICE 转换 API 构建在线文档转换器

文档转换是非常常用、非常有价值的功能&#xff0c;可以帮助我们处理多种文档类型。ONLYOFFICE 编辑器可以轻松地将文档转换为多种格式。在这篇博文中&#xff0c;我们会向您展示&#xff0c;如何构建在 ONLYOFFICE 转换 API 上运行的在线转换器。 关于 ONLYOFFICE 转换 API 使…...

Kubernetes的负载均衡方案:MetalLB

私有云裸金属架构(这是相对云上环境来说,不是说无操作系统)上部署的 Kubernetes 集群,通常是无法使用 LoadBalancer 类型的 Service 的。因为 Kubernetes 本身没有为裸机群集提供网络负载均衡器的实现。 如果你的 Kubernetes 集群没有在公有云的 IaaS 平台(GCP,AWS,Azu…...

【项目】Vue3+TS CMS 基本搭建相关配置

&#x1f4ad;&#x1f4ad; ✨&#xff1a;Vue3 TS   &#x1f49f;&#xff1a;东非不开森的主页   &#x1f49c;: today beginning&#x1f49c;&#x1f49c;   &#x1f338;: 如有错误或不足之处&#xff0c;希望可以指正&#xff0c;非常感谢&#x1f609;   基本…...

ros2 dds

问题1: fastdds发布的类型&#xff0c;ros2接收不到 原因: 在QoS相互兼容情况下&#xff0c;无法通信是由于idl类型没有使用兼容ros2的格式。如用 ros2 topic list -t 查看时&#xff0c;会发现同一个topic有两个不同的类型&#xff0c;如DDS会显示&#xff1a;myclass::peo…...

chain33架构介绍

chain33架构介绍 Chain33构架主要分为五个层级&#xff1a;数据层、网络层、共识层、激励层及应用层。 应用层&#xff1a;兼容以太坊智能合约&#xff0c;支持发行代币、资产交易、钱包找回&#xff0c;hash锁定等原生能力&#xff0c;同时支持用户可扩展执行器&#xff08;…...

Lucene学习笔记

lucene结构 索引&#xff1a;概念上的一个表&#xff0c;现实体现就是一个文件目录&#xff0c;一个目录代表一个索引&#xff0c;也视作documents文档集合 文档&#xff1a;document&#xff0c;为索引中的一条数据&#xff0c;一个document可以拥有多个filed&#xff08;域&a…...

动态规划【Day01】| 669 · 换硬币、114 · 不同的路径、116 · 跳跃游戏

秘诀&#xff1a;确定状态转移方程初始条件和边界情况计算顺序 669 换硬币 669 换硬币 题目描述&#xff1a; 给出不同面额的硬币以及一个总金额. 写一个方法来计算给出的总金额可以换取的最少的硬币数量. 如果已有硬币的任意组合均无法与总金额面额相等, 那么返回 -1。 样…...

1.Hello Python

Python ​ Python 在网络爬虫、数据分析、AI、机器学习、Web开发、金融、运维、测试等多个领域都有不俗的表现&#xff0c;从来没有哪一种语言可以同时在这么多领域扎根。 Python基本语法 python关键字 ​ 关键字即保留字&#xff0c;和其他语言一样&#xff0c;这些关键字…...

C语言实例|编写C程序在控制台打印余弦曲线

C语言文章更新目录 C语言学习资源汇总&#xff0c;史上最全面总结&#xff0c;没有之一 C/C学习资源&#xff08;百度云盘链接&#xff09; 计算机二级资料&#xff08;过级专用&#xff09; C语言学习路线&#xff08;从入门到实战&#xff09; 编写C语言程序的7个步骤和编程…...

《Hadoop篇》------大数据及Hadoop入门

目录 一、大数据及Hadoop入门 1.1 单节点、分布式、集群 1.1.1 大数据的概念 1.1.2 大数据的本质 二、HDFS Shell命令 2.1、常用相关命令 2.2、上传文件 2.2.1、上传文件介绍 2.2.2上传文件操作 2.3、下载文件 2.4、删除文件 2.5、创建目录 2.6、查看文件系统 2.…...

TCP核心机制详解(三)

目录 前言&#xff1a; 滑动窗口 滑动窗口处理丢包问题 流量控制 拥塞控制 延时应答 捎带应答 面向字节流 异常情况 小结&#xff1a; 前言&#xff1a; 前两篇文章讲述了&#xff0c;TCP十种核心机制的前三种。这篇文章详细介绍其他的一些核心机制&#xff0c;让我们…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...