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 中如何使用自定义组件的主要内容,如果未能解决你的问题,请参考以下文章