angular小记
declarations:包装组件或指令等
providers:依赖注入
imports:导入其他模块
bootstrap:设置根组件
exports:导出组件或指令等
app.component.ts:嵌套组件树的根组件
app.module.ts:根模块,开始只申明AppComponent
main.ts:应用的入口点,引导AppModule在浏览器中运行
<router-outlet>:可以简单把它理解为: 页面的占位符,动态加载,会被替换掉的。当点击 home、about、 dashboard 时, 在导航栏的下方,会被对应的 XX.component.html 替换掉。 这就是单页面路由的原理。Routers 参数是一个有路由定义组成的一个数组。路由定义分如下两部分:Path:这个是用来匹配浏览器地址中的URL。Component:路由对应的组件。
routerLink:链接到已设置的路由 <a routerLink="dashboard">Dashboard</a>
navigate() :跳转路由传参
// 页面带参数跳转方法
goUser() {
this.router.navigate(['/user'], {
queryParams: {
name: '另一个凉雨'
}
});
}
// 接收传过来的参数
this.name = this.routeInfo.snapshot.queryParams['name'];
模块->路由->子模块->子路由->组件->构成页面
新增通用组件注册到sharedModule中,可以复用
ng-alian知识:
ng serve --host 192.168.1.121 --port 4200
[] -属性 ()-事件 [()]-双向绑定
angular小记的更多相关文章
- Electron Angular 开发小记
一介绍 electron分为主进程和渲染进程,主进程负责和原生交互,控制窗口等. 渲染进程就是普通网页.主进程和渲染进程可以通过ipcMain(主进程使用)及ipcRenderer(渲染进程用)通信 ...
- angular开发手机网页小记
禁用滑动事件,阻止触发浏览器翻页行为 <html lang="en" style="height:100%" ontouchmove="(f ...
- React和Angular
React和Angular 你若装逼,请带我飞! 从前,从前,听说React只负责UI,话说写Angular代码就像写后端,现在看来,React赢在情怀上了: 我认为没必要老是拿React和Angul ...
- angular常见问题总结
本文引自:https://www.cnblogs.com/zhoulujun/p/8881414.html 这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理 ...
- Angular2 初学小记
1.与Angular1的异同 几乎完全不同(什么鬼~ 1)保留一些特性 表达式仍旧用{{}}. 2)属性指令变为驼峰式 ng-if ---> ngIf 3)ng-repeat被ngFor代替 4 ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Angular企业级开发(5)-项目框架搭建
1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...
- TypeScript: Angular 2 的秘密武器(译)
本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...
- angular实现统一的消息服务
后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...
随机推荐
- .NET平台系列16 .NET5/Asp.Net Core 在全球Web框架权威性能测试 Web Framework Benchmarks 中的吊炸天表现
系列目录 [已更新最新开发文章,点击查看详细] TechEmpower Web Framework Benchmarks 是许多Web应用程序框架执行基本任务(如JSON序列化.数据库访问和服 ...
- PTH的几种食用姿势
PTH PTH(pass the hash)也叫做hash传递.在内网渗透中是一种很经典的攻击方式,原理就是攻击者可以直接通过NTLM Hash(mimikatz或其他手段抓取到的密码hash)访问远 ...
- 面部表情视频中进行远程心率测量:ICCV2019论文解析
面部表情视频中进行远程心率测量:ICCV2019论文解析 Remote Heart Rate Measurement from Highly Compressed Facial Videos: an ...
- NSight Compute 用户手册(上)
NSight Compute 用户手册(上) 非交互式配置文件活动 从NVIDIA Nsight Compute启动目标应用程序 启动NVIDIA Nsight Compute时,将出现欢迎页面.单击 ...
- 解决:django.core.exceptions.ImproperlyConfigured: Requested setting INSTALLED_APPS, but settings are not 的方法
错误类型: 该错误是在在创建Django工程时出现遇到的错误 完整报错信息:(博文标题输入长度有限制) django.core.exceptions.ImproperlyConfigured: Req ...
- python读取配置文件,yaml模块读取yml文件
ymal文件编写语法参考http://www.ruanyifeng.com/blog/2016/07/yaml.html ymal在python中的安装:pip install pyyaml yml文 ...
- mybatis学习——多对一和一对多查询
首先先来说明一下数据库,数据库有两张表student表和teacher表: student表如下: teacher表如下: 两张表的关系:多个学生关联一位老师(多对一) *其中tid是外键 需要sql ...
- 又见 xcrun: error: invalid active developer path 错误
每次升级完macOS都会被 Xcode command line tools missing xcrun 问候一遍,也是挺烦的. 这个春节过光顾着吃喝玩乐,过的蛮颓废的,感觉再也追不上朋友圈各位大佬了 ...
- 日常Bug排查-Nginx重复请求?
日常Bug排查-Nginx重复请求? 前言 日常Bug排查系列都是一些简单Bug排查,笔者将在这里介绍一些排查Bug的简单技巧,其中不乏一些看起来很低级但很容易犯的问题. 问题现场 有一天运维突然找到 ...
- Halcon 纹理缺陷检测 apply_texture_inspection_model
在纹理中找瑕疵.基于高斯混合模型(GMM)分类器的纹理检查模型,适用于图像金字塔,可以分析纹理的多个频率范围. [要求]训练样本,必须完美无瑕疵. [步骤] 1.创建模型 create_texture ...