app HTML

<div class="wrapper"><h2>我是父組件</h2><div>這個div定義在父組件中</div><app-child><div class="header">這個div是父組件投影到子組件的1, {{title}}</div><div class="footer">這個div是父組件投影到子組件的2</div></app-child> </div> <div [innerHTML] = "divContent"></div>

app TS

import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent {title = 'demo';divContent = '<div>天下打工</div>'; }

child HTML

<div class="wrapper"><h2>我是子組件</h2><div>這個div定義在子組件中</div><div>內容投影使用 ng-content 跟 select</div><ng-content select=".footer"></ng-content><ng-content select=".header"></ng-content> </div>

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的angular 内容投影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。