• 技术文章 >web前端 >js教程

    浅谈Angular中组件(@Component)基本知识

    青灯夜游青灯夜游2021-06-11 10:44:44转载82
    本篇文章给大家介绍一下Angular中组件(@Component)基本知识。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    环境:

    • Angular CLI: 11.0.6
    • Angular: 11.0.7
    • Node: 12.18.3
    • npm : 6.14.6
    • IDE: Visual Studio Code

    1. 概述

    组件是 Angular 应用的主要构造块。每个组件包括如下部分:

    Component可以是一个页面,也可以是一个组件(控件)。总是,是一个页面元素。【相关教程推荐:《angular教程》】

    任何一个Component都是NgModule的一部分,这样它就可以被其他应用和其他Component所调用。为了定义Component是NgModule的一个成员之一,开发者应该在NgModule的declarations属性中,将自己开发的Component列出。

    另外,通过Component修饰符(也就是@Component)开发者可以配置元数据,这样通过各式各样的Life-Cycle hooks,Components就可以控制他们的运行环境。

    2. 创建Component

    基于AngularCLI,可以很方便的创建Component。在要创建Component的目录下,执行如下命令

    ng generate component <component-name>

    e.g. ng generate component MyComponent
    AngularCLI会自动生成一个文件夹和4个文件:

    对于Component,所有文件名都会自动增加Component后缀,所以不建议< component-name > 中带有‘component’这个单词。

    @Component({
      selector: 'app-my-component',
      templateUrl: './my-component.component.html',
      styleUrls: ['./my-component.component.css']
    })
    export class MyComponentComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit(): void {
      }
    
    }

    以上是核心的ts文件,指定了selector(CSS 选择器),template(html)文件,css文件。html/css文件如果需要可以多个component公用。尤其是css,可以看到参数是Array,所以可以制定多个css。

    2.1. 组件模板

    组件模板,即HTML部分,可以是一个html文件,也可以是一段html描述,是等价的。Angular 组件需要一个用 template 或 templateUrl 定义的模板。但你不能在组件中同时拥有这两个语句。

    1、html 文件方式

    @Component({
      selector: 'app-component-overview',
      templateUrl: './component-overview.component.html',
    })

    2、html代码方式

    @Component({
      selector: 'app-component-overview',
      template: '<h1>Hello World!</h1>',
    })

    3. 视图封装模式

    在 Angular 中,组件的 CSS 样式被封装进了自己的视图中,而不希望影响到应用程序的其它部分。这部分也是可以通过配置去进行控制的。

    @Component({
      selector: 'app-my-component',
      templateUrl: './my-component.component.html',
      encapsulation: ViewEncapsulation.None,
      styleUrls: ['./my-component.component.css']
    })

    可以看到,增加了一个encapsulation属性 (视图封装模式)。通过在组件的元数据上设置视图封装模式,你可以分别控制每个组件的封装模式。 可选的封装模式一共有如下几种:

    1. Emulated 模式(默认值)通过预处理(并改名)CSS 代码来模拟 Shadow DOM 的行为,以达到把 CSS 样式局限在组件视图中的目的。 更多信息,见附录 1。(说明:只进不出,全局样式能进来,组件样式出不去)
    2. ShadowDom 模式使用浏览器原生的 Shadow DOM 实现来为组件的宿主元素附加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中,组件的样式也被包含在这个 Shadow DOM 中。(说明:不进不出,没有样式能进来,组件样式出不去。)
    3. None 意味着 Angular 不使用视图封装。 Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。 从本质上来说,这跟把组件的样式直接放进 HTML 是一样的。

    3.1. 特殊的选择器 :host

    使用 :host 伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素)。 :host 选择是是把宿主元素作为目标的唯一方式。除此之外,你将没办法指定它, 因为宿主不是组件自身模板的一部分,而是父组件模板的一部分。

    e.g.

    :host {
    }

    3.2. inline-styles

    默认AngularCLI生成的component,css在一个单独文件中。当然,同html模板类似,如果需要,你也可以制定css样式写在ts中, 不单独放到一个文件中。命令:ng generate component MyComponent --inline-style

    生成component如下

    @Component({
      selector: 'app-my-component',
      template: '<h1>Hello World!</h1>',
      styles: ['h1 { font-weight: normal; }']
    })

    4. 总结

    更多编程相关知识,请访问:编程视频!!

    以上就是浅谈Angular中组件(@Component)基本知识的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:Angular 组件 @Component
    上一篇:jsp写javascript用什么标签 下一篇:JavaScript在页面增加元素
    第16期线上培训班

    相关文章推荐

    • 浅谈Angular中父子组件间相互传参的方法• 浅谈Angular如何编译打包?如何使用Docker发布?• Angular中关于单元测试的面试题,你能回答上来吗?• 浅谈Angular中的Component/Service• 浅谈Angular项目中如何引入第三方UI库(Angular Material)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网