include其他component可以達到你要的效果

舉例:

我有個專案
需要多個內容component
每個component都要包含一樣的header跟footer

這時候可以把header跟footer各做一個component
讓其他內容component去include

這樣只要修改header.ts全部的內容都會跟著一起修改
不用每個.ts去改template

Code:

內容

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
<header-app></header-app>
<p>
  我是內容 <br>
  你好IT邦幫忙
</p>  
<footer-app></footer-app>
  `
})
export class AppComponent  {
}

Header

import { Component } from '@angular/core';

@Component({
  selector: 'header-app',
  template: `
    <div style="background-color: yellow;">
      我是Header
    </div>
  `
})
export class HeaderLayoutComponent  {
}

Footer

import { Component } from '@angular/core';

@Component({
  selector: 'footer-app',
  template: `
    <div style="background-color: red;">
      我是Fotter
    </div>
  `
})
export class FooterLayoutComponent  {
}

DEMO連結

你先看一下，有疑惑的地方再跟我說 :-)