创建组件

在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. JAVA 从头开始<二>

    一.JAVA_HOME 1.环境变量如果经常变更,就要经常操作到Path,可能会一不小心把什么东西给删了 2.最好新建一个环境变量 3.如果使用新环境变量 ①原来的写法 ②现在的写法 新建环境变量JA ...

  2. Openwrt 远程调试

    此文已由作者吴志勐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 本文以自己的程序WFD为例: 1,为路由器固件刷上gdbserver 在宿主端,使用make menucon ...

  3. 检查网卡是否支持 SR-IOV

    [root@node1 ~]# lspci -nn | grep Eth 08:00.0 Ethernet controller [0200]: Intel Corporation I350 Giga ...

  4. python 以行为单位进行字符串的切割

    可以使用str 的 splitlines() 方法 实现以行为单位 进行字符串的切割, keepends=False 不保留\n符号, kendends=True 保留\n符号 my_str = &q ...

  5. Qt5学习笔记（基础）

    按钮 #include <QApplication> /*应用程序抽象类*/ #include <QWidget> //窗口类 #include <QPushButton ...

  6. 关于rpm的命令

    我是从这里学的:https://www.cnblogs.com/picaso/archive/2012/07/02/2573748.html 软件的安装时操作系统管理的基础,与Windows不同,Li ...

  7. 完整的REM布局的工作流程与规范

    rem从去年的手淘双11开始火起来之后一直就想去使用,但是苦于学习途径有限,工作任务也比较繁忙导致一度延后. 那么现在对相关知识的学习与初步的项目实践之后,在这里记录一下使用rem解决各屏幕适配问题. ...

  8. linux的hostname(主机名)修改详解

    Linux操作系统的hostname是一个kernel变量,可以通过hostname命令来查看本机的hostname.也可以直接cat /proc/sys/kernel/hostname查看. #ho ...

  9. php判断是否使用手机访问

    直接上代码 /** * 检测是否使用手机访问 * @access public * @return bool */ public function isMobile() { if (isset($_S ...

  10. IIS 8 配置错误

    1) ProtocolException: The remote server returned an unexpected response: (405) Method Not Allowed Th ...