angular 中如何使用自定义组件

Posted loaderman

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angular 中如何使用自定义组件相关的知识,希望对你有一定的参考价值。

1.创建header组件

ng g component components/header

header.component.ts

import { Component, OnInit } from ‘@angular/core‘; /*引入 angular 核心*/

@Component({
  selector: ‘app-header‘, /*使用这个组件的名称*/
  templateUrl: ‘./header.component.html‘, /*html 模板*/
  styleUrls: [‘./header.component.scss‘] /*css 样式*/
})
export class HeaderComponent implements OnInit { /*实现接口*/

  constructor() { }/*构造函数*/

  ngOnInit() {/*初始化加载的生命周期函数*/
  }

}

 

2.在使用的地方使用组件

比如在跟组件下使用

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">


  <h1>
    Welcome to {{ title }}
  </h1>
</div>
<app-header></app-header>
<router-outlet></router-outlet>

 

以上是关于angular 中如何使用自定义组件的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 中处理自定义输入组件上的输入事件?

如何在 Angular 2+ 中添加自定义验证

如何在页面上多次重用自定义 Angular2 组件?

如何在Angular的自定义控件组件中触摸内部控件?

如何降级使用 angular2 编写的自定义管道以在 angular 1.5 中使用?

创建自定义的 Angular 模块