angular新建组件
来源:互联网 发布:微信app支付 php demo 编辑:程序博客网 时间:2024/06/08 17:28
1,使用ng g c hello创建一个新的组件
它创建了4个文件,并更新了app.module.ts
如果想访问这个组件,只需要添加它的路由
成功访问这个组件
Import语句定义了我们需要用到的哪些模块,import语句的结构 import { things } from wherever.这种写法叫解构。解构是Es6和TypeScript提供的一项新特性。Angular本身是用TypeScript写成的,TypeScript文件的后缀是.ts。浏览器不知道如何解释TypeScript文件,我们执行ng serve命令的时候,会自动把ts文件编译为js文件。 @Component,angular依赖注入技术,使用注解概念。 注解其实是让编译器为代码添加功能的途径。
添加template,我们有两种定义模板的方式,一是使用templateurl在指定的html中写,当angular加载组件时,会读取hello.component.html中的内容作为组件的模板,另一种就是下面的这种,使用反引号(`......`)定义template字符串。这是es6的新特性,允许使用多行字符串,可以轻松的把模板放在代码中。//有人认为把代码和模板分开更好,个人认为使用时视情况,如果模板行数少于一页放在ts文件中可以同时看到逻辑和视图部分,缺点是,视图和代码内联,很多编辑器不支持对模板字符串内html语法的高亮显示。随个人喜好吧。
这四个文件,spec.ts为测试文件,可以不用管,组件中的css文件只作用于组件本身,
组件的复用:如果想要在刷新浏览器的时候就看到我们的hello组件,就在app.component.html中把hello组件的selector的内容作为一个标签,添加到即将渲染的模板中,就能看到hello组件中的内容。
如果添加到app.conponent.html中,在其他组件中都会显示,因为这是一个总的,通常在这里定义导航和页脚等。
- angular新建组件
- Angular组件
- Angular 组件
- angular组件
- angular Tip组件编写
- Angular的Table 组件
- angular 组件化
- angular组件化2
- angular 组件通信
- Angular 组件间通信
- angular 动态组件
- angular组件通信
- Angular Material GridList组件
- Angular Material Dialog 组件
- Angular Material Autocomplete 组件
- Angular Material Menu 组件
- Angular 2-组件
- Angular中的组件交互
- 【程序员的碎碎念】兴趣?选择:坚持
- XXX.properties用git无法提交
- 初探Java源码之LinkedList
- Python中的对象赋值与拷贝
- eclipse安装以及java环境变化的配置
- angular新建组件
- C/C++编译的程序占用的内存分配情况
- KMP 算法 新手详解推荐博客
- 2017-09-06,eclipse ssm整合 spring aop逻辑(目前个人实用)
- django加载css等静态文件
- 适配器模式
- Linux下安装mysql出现的一些问题以及解决办法
- Grade HDU5038
- timequest静态时序分析学习笔记——基本概念