创建组件

在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. JavaScript原型与继承的秘密

    在GitHub上看到的关于JavaScript原型与继承的讲解,感觉很有用,为方便以后阅读,copy到自己的随笔中. 原文地址:https://github.com/dreamapplehappy/b ...

  2. 利用MVC5+EF6搭建博客系统

    https://www.cnblogs.com/wyt007/p/7880137.html

  3. MaxScript调用DotNet时命名空间的问题

    Fn GetSpecialFolder argEnumName = (DotNetClass "System.Environment").GetFolderPath (Execut ...

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

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

  5. LCS2 - Longest Common Substring II(spoj1812)(sam(后缀自动机)+多串LCS)

    A string is finite sequence of characters over a non-empty finite set \(\sum\). In this problem, \(\ ...

  6. jzoj100031

    這題是結論題 好玄學,不懂 代碼: #include<bits/stdc++.h> using namespace std; struct no{ int v,p; bool operat ...

  7. Java直接内存与非直接内存性能测试

    什么是直接内存与非直接内存 根据官方文档的描述: A byte buffer is either direct or non-direct. Given a direct byte buffer, t ...

  8. QQ聊天框测试用例设计

    QQ.微信聊天框的主要功能就是发送消息和接收别人发过来的消息. 消息内容类型: 纯文字 纯图片 纯表情 文字+表情 文件 发送键: 点击“发送”发送 使用快捷键发送(针对电脑端) 用户在线状态: 在线 ...

  9. RabbitMq qos prefetch 消息堵塞问题

    mq是实现代码扩展的有利手段,个人喜欢用概念来学习新知识,介绍堵塞问题的之前,先来段概念的学习. ConnectionFactory:创建connection的工厂类 Connection: 简单理解 ...

  10. Linux驱动：LCD驱动测试

    (1) 进入内核源码目录中,make menuconfig -> Device Drivers -> Graphics support -> [M]Support for frame ...