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>