创建组件

在vscode的命令窗口输入：

ng generate component login --inline-template --inline-style

　　或者简写

ng g c login -it -is

　　

这参数generate用来生成文件，参数component说明是组件，login是组件名称，自己定义，后面的参数告诉angular-cli生成组件时，把组件的html模板和css样式放在同一个文件中，第二种写法是第一种写法的简写。

这里生成的ts文件应该就是TypeScript文件，就像js文件就是JavaScript文件

创建的组件会在src/app的路径，单独有一个文件夹

这里login.component.ts就是新建的组件，打开这个文件

selector标签就是我们的组件在html模板中的名称

使用组件

打开app.component.html添加app-login标签

运行应用

输入：ng server

浏览器打开：http://localhost:4200/

ok！我们的第一个组件搭建完成。

Angular的第一个组件的更多相关文章

  1. react实战系列 —— react 的第一个组件

    react 的第一个组件 写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生. 本文分两部分,首先聊一下 react 的相关概念,然后不使用任何语法糖(包括 jsx)或可能隐藏底 ...

  2. 【转载】COM 组件设计与应用（六）——用 ATL 写第一个组件

    原文:http://vckbase.com/index.php/wv/1216.html 一.前言 1.与 <COM 组件设计与应用(五)>的内容基本一致.但本回讲解的是在 vc.net ...

  3. 【转载】COM 组件设计与应用（五）——用 ATL 写第一个组件

    原文:http://vckbase.com/index.php/wv/1215.html 一.前言 1.如果你在使用 vc5.0 及以前的版本,请你升级为 vc6.0 或 vc.net 2003: 2 ...

  4. Angular各版本和组件下载

    Angular各版本和组件下载:https://code.angularjs.org/

  5. angular项目使用Swiper组件Loop时 ng-click点击事件失效处理方法

    在Angular项目中,使用swiper组件进行轮播展示时,存在将swper的loop设置为true时,部分页面的ng-click失效. 原因:将swiper中的looper设置为true时,为了视觉 ...

  6. Angular总结三：组件

    Angular 的应用就是一棵组件树,一个页面可以是一个组件,某一页面的一个区块也可以是一个组件.为了弄明白组件及组件树,我将原来做过的一个静态网站进行组件改造. 原项目地址 https://gith ...

  7. Angular : 响应式编程, 组件间通信, 表单

    Angular 响应式编程相关 ------------------------------------------------------------------------------------ ...

  8. @angular/cli项目构建--组件

    环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...

  9. Angular 学习笔记 (动态组件 & Material Overlay & Dialog 分析)

    更新: 2019-11-24  dialog vs router link refer : https://stackoverflow.com/questions/51821766/angular-m ...

随机推荐

  1. Pipelines - .NET中的新IO API指引(三) 边看边记

    Pipelines - .NET中的新IO API指引 作者 marcgravell  原文 此系列前两篇网上已有的译文 Pipelines - .NET中的新IO API指引(一) Pipeline ...

  2. C# TinyMapper

    https://github.com/TinyMapper/TinyMapper 据说性能蛮高的,我没对比测试过. NuGet安装下. 新增三个实体. public class A { public ...

  3. 企业项目开发--分布式缓存memcached（3）

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 3.3.ssmm0-data 结构: 3.3.1.pom.xml  1 <?xml version=& ...

  4. spring jdbc批量插入

    http://blog.csdn.net/fyqcdbdx/article/details/7366439

  5. s11 day103 luffy项目结算部分+认证+django-redis

    1.增加认证用的表 class Account(models.Model): username =models.CharField(,unique=True) email= models.EmailF ...

  6. AGC002F Leftmost Ball

    题目传送门 Description \(n\)种颜色的球,每种\(k\)个,\((n,k\leq 2000)\)将\(n\cdot k\)个球排成一排,把每种颜色最左边的那个涂成白色(初始不含白色), ...

  7. “全栈2019”Java多线程第二十章：同步方法产生死锁的例子

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  8. git 常用命令(不定期更新)

    过程写写吧,总是忘记.1,在一个文件夹下 键入 git init ,使之成为Git可以管理的仓库.2,编写一个文件readme.txt.3,把文件添加到仓库 git add readme.txt4,把 ...

  9. http 缓存策略浅析

    从一道经典的面试题说起 "用户输入 URL 到浏览器显示页面,这个过程发生了什么?",作为前端开发,这个题目相信大家并不陌生.楼主的答案分为两部: 一.网络通信 应用层 DNS 域 ...

  10. git命令上传项目到码云总结

    码云上传项目git命令总结: git clone https://git.oschina.net/xh-lxx/xh-lxx.oschina.io.git 进入到克隆下来的文件夹,然后操作git命令 ...