创建组件

在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. 构建NetCore应用框架之实战篇（一）：什么是框架，如何设计一个框架

    一.系列简述 本篇起,将通过一系列文章,去描述如何构建一个应用开发框架,并以作者开发的框架为例,逐个点展开分析,如何从零开始,构建自己的开发框架. 本系列文章的目的,是带领有一编程经验的人,通过动手, ...

  2. [Xamarin]我的Xamarin填坑之旅（一）

    一想到明天是星期五,不对,是今天,心里就很激动,毕竟明天没课.激动之余,来写一篇博客,记录一下最近踏坑Xamarin开发校园助手APP的一些事儿.也许更像是一篇流水账. 在扯Xamarin之前,有必要 ...

  3. 盘点Xcode中开发者最喜爱的十大开源插件

    Xcode IDE拥有着诸如导航.重构.校准等众多非常高大上的工具,而予以辅助的插件更是在Xcode的基础上对相关功能进行改进与扩展.在应用开发过程中,通过开源包管理器Alcatraz对插件进行安装管 ...

  4. 《Python黑帽子：黑客与渗透测试编程之道》 Windows下木马的常用功能

    有趣的键盘记录: 安装pyHook: http://nchc.dl.sourceforge.net/project/pyhook/pyhook/1.5.1/pyHook-1.5.1.win32-py2 ...

  5. fastAdmin根据状态显示是否显示操作按钮

    根据状态决定是否显示某个操作按钮 代码如下:

  6. 修正eth0,解决虚拟机桥接问题

    centos 中没有 ifcfg-eth0 配置文件的解决办法 1.也就是说是centos6改用NetworkManager方式管理网络了,可以运行如下命令进行确认: chkconfig --list ...

  7. 《JAVA与模式》之代理模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述代理(Proxy)模式的: 代理模式是对象的结构模式.代理模式给某一个对象提供一个代理对象,并由代理对象控制对原对象的引用. 代理模式的结 ...

  8. iOS pods更新失败

    ――― TEMPLATE END ―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― [!] Oh no, an erro ...

  9. 简单HOG+SVM mnist手写数字分类

    使用工具 :VS2013 + OpenCV 3.1 数据集:minst 训练数据:60000张 测试数据:10000张 输出模型:HOG_SVM_DATA.xml 数据准备 train-images- ...

  10. SpringBoot学习笔记（一）基础

    Spring Boot理念 习惯优于配置.使用Spring Boot很容易创建一个独立运行(运行jar,内嵌servlet容器).准生产级别的基于Spring框架的项目,使用SpringBoot可以不 ...