1. //app.component.html
    2. <app-ngcomponent></app-ngcomponent>
    5. //app-ngcomponent.html
    6. <app-democomponent>
    7.     我是外部嵌入的组件
    8.     <header>
    9.         我是外部嵌入的内容，我在header中
    10.     </header>
    11.     <div class="demo2">
    12.         我是外部嵌入的内容，我在div中的class为demo2
    13.     </div>
    14.     <div name="demo3">
    15.         我是外部嵌入的内容，我在div的属性name为demo3
    16.     </div>
    17. </app-democomponent>
    19. //app-democomponent.html
    20. <div class="demo">
    21.     <h2>
    22.         demo-component - 可嵌入外部内容的组件
    23.     </h2>
    24.     <div class="content">
    25.         <ng-content></ng-content>
    26.     </div>
    27.     <div class="content blue">
    28.         <ng-content select = "header"></ng-content>
    29.     </div>
    30.     <div class="content red">
    31.         <ng-content select = ".demo2"></ng-content>
    32.     </div>
    33.     <div class="content green">
    34.         <ng-content select = "[name=demo3]"></ng-content>
    35.     </div>
    36. </div>
    39. //app-democomponent.less
    40. .demo {
    41.     padding: 10px;
    42.     border: 2px solid red;
    44.     h2 {
    45.         margin: 0;
    46.         color: #262626;
    47.     }
    49.     .content {
    50.         padding: 10px;
    51.         margin-top: 10px;
    52.         line-height: 20px;
    53.         color: #FFFFFF;
    54.         background-color: #de7d28;
    56.         &.blue {
    57.             background-color: blue;
    58.         }
    60.         &.red {
    61.             background-color: red;
    62.         }
    64.         &.green {
    65.             background-color: green;
    66.         }
    67.     }
    68. }

    image.png