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>
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2019-05-17 17:52 LoaderMan 阅读(3734) 评论(0) 编辑 收藏 举报