创建组件

在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. [C#]C#时间日期操作

    一.C# 日期格式 1. DateTime dt = DateTime.Now; 2. dt.ToString();//2005-11-5 13:21:25 3. dt.ToFileTime().To ...

  2. 认识与学习shell

    linux的终端机执行命令的方式,是通过bash环境来处理的.bash包括变量的设置与使用,.bash操作环境的构建.数据流重定向的功能.下面的知识,对主机的维护与管理有重要的帮助. 管理整个计算机硬 ...

  3. JavaScript中的类数组对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    / ...

  4. linux ab压力测试工具及ab命令详解

    原文链接:https://blog.csdn.net/qq_27517377/article/details/78794409 yum -y install httpd-tools ab -v 查看a ...

  5. C++的访问关系

    1.C++的访问关系

  6. jzoj5945

    這題是均分紙牌求方案數 我們可以分2種情況討論: 1.當前面部分的平均值>=現在我們要的值 那麼我們可以把所有牌都放到第i個點,現在若有k張牌,則要把k−i∗avek-i*avek−i∗ave張 ...

  7. POST 400 (BAD REQUEST)

    遇到这种错,1,F12打开控制台,2,点击network,找到发送的请求. 3,点击请求,4,看右侧的 Header Preview Response 应该能找到原因. 就拿刚才来说,找了好几个小时原 ...

  8. POJ 1160

    #include <iostream> #define MAXN 305 #define inf 123456789 using namespace std; int _m[MAXN][M ...

  9. constructor 属性返回变量或对象的构造函数。判断是否为日期，数组的例子

    constructor 属性返回变量或对象的构造函数. <!DOCTYPE html> <html> <head> <meta charset="u ...

  10. hadoop2.x 安装配置

    hadoop2.x在系统架构上与hadoop1.x有很大的变化 原文地址: http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-y ...