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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 仿制Reddit网站 读完本章之后, 你将掌握如何构建基本的Angular应用。 简单的应用将涵盖Angular中...
    东东少将阅读 3,420评论 1 28
  • 组件基础 组件用来包装特定的功能,应用程序的有序运行依赖于组件之间的协同工作。组件是angular应用的最小逻辑单...
    oWSQo阅读 1,445评论 0 0
  • 【1】 前几天我去医院,看完病往外走时,在医院门口居然遇见一位因工作结识的长辈。 他告诉我,他儿子患结肠炎,现在休...
    共鸣JING阅读 198评论 0 1
  • 昨日开始骑行,第一次骑上山顶,中间下车三次,终于挨到了山顶,看到云的刹那,风吹汗湿的身体,赶紧拍张照片发给mo欣赏...
    wen_a阅读 295评论 2 1
  • 5岁时,惨遭一位酒鬼强奸。 15岁离家出走。 16岁毫无准备下生下小孩,因无力抚养送人。 结婚14年后被丈夫遗弃,...
    顾小宝阅读 1,133评论 0 5

友情链接更多精彩内容