Angular2 组件的使用

创建组件需要三步:

1.从 @angular/core 引入 Component 装饰器

2.创建一个类,并用 @Component 修饰

3.在 @Component 中 ,设置selector、template 和 styles 等元数据

import {Component} from '@angular/core';

@Component({
      selector: 'app-root',
      //template: '<p>Hello, {{name}}</p>'
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
})

export class Hello {
    name: string;

    constructor() {
        this.name = 'World';
    }
}

<b>selector (选择器):</b> 我们用它来告诉Angular创建和插入这个组件实例的元素属性。

<b>templateUrl(模版地址):</b> HTML的一种形式,它告诉Angular如何呈现这个组件。

<b>template (模板):</b> HTML的一种形式,它告诉Angular如何呈现这个组件。

<b>styleUrls(模版样式地址):</b> css样式,在组件模版中引用的css样式。


<h6 align = "right">sivona</h6>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏扎心了老铁

JavaScript实现模糊推荐的input框(类似搜索框)

如何用JS实现一个类似搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: ? 实现很简单,但是易用性会上升一大截,需要用到的有jquery-...

6629
来自专栏小俊博客

通过JS显示网站运行时间

73212
来自专栏老马寒门IT

01-Vue.js入门系列

1.1. Vue简介 Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己...

2375
来自专栏JetpropelledSnake

Python入门之PyCharm的快捷键与常用设置和扩展(Win系统)

1.  PyCharm的快捷键 2 . PyCharm的常用设置和扩展 ------------------------------------------...

4534
来自专栏每日一篇技术文章

weex-15-组件web的使用

当我们单击一个按钮打开一个新的网页的时候,如何返回前一个页面呢?我们带着疑问来继续今天的内容

3502
来自专栏Golang语言社区

Golang语言--- channel

// xuhh_go_channel project main.go /* channel 1. channel 在读取数据的时候,如果此时通道...

3699
来自专栏HTML5学堂

iframe基本知识及iframe版本Tab切换

HTML5学堂:本文当中,会依次为大家介绍iframe是什么,为何使用iframe;如何在当前网页中调用iframe中的标签和内容;如何在iframe中调用当前...

3754
来自专栏向前进

【整合】input标签JS改变Value事件处理方法

  某人需要在时间控件给文本框赋值时,触发事件函数。实现的效果:   1、文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件。阻塞在于失去焦点后才触...

4935
来自专栏阿炬.NET

常用插件备份

3108
来自专栏源哥的专栏

HTML中实现右键菜单功能

我们使用的应用系统很多都有右键菜单功能。但是在网页上面,点击右键一般显示的却是IE默认的右键菜单,那么我们如何实现自己的右键菜单呢?下面将讲解右键菜单功能的实现...

3153

扫码关注云+社区

领取腾讯云代金券