1-1 普遍性

  1. //app.component.html
  2. <app-ngcomponent></app-ngcomponent>
  5. //app-ngcomponent.html
  6. <app-democomponent>
  7.         这是外部嵌入的内容
  8. </democomponent>
  11. //app-democomponent.html
  12. <div class="demo">
  13.     <h2>
  14.         demo-component - 可嵌入外部内容的组件
  15.     </h2>
  16.     <div class="content">
  17.         <ng-content ></ng-content>
  18.     </div>
  19. </div>
  21. //app-democomponent.less
  22. .demo {
  23.     padding: 10px;
  24.     border: 2px solid red;
  26.     h2 {
  27.         margin: 0;
  28.         color: #262626;
  29.     }
  31.     .content {
  32.         padding: 10px;
  33.         margin-top: 10px;
  34.         line-height: 20px;
  35.         color: #ffffff;
  36.         background-color: #de7d28;
  37.     }
  38. }

image.png

1.2 针对性

1.2.1

  1. //app.component.html
  2. <app-ngcomponent></app-ngcomponent>
  5. //app-ngcomponent.html
  6. <app-democomponent>
  7.         这是外部嵌入的内容
  8. </democomponent>
  11. //app-democomponent.html
  12. <div class="demo">
  13.     <h2>
  14.         demo-component - 可嵌入外部内容的组件
  15.     </h2>
  16.     <div class="content blue">
  17.         <ng-content></ng-content>
  18.     </div>
  19.     <div class="content">
  20.         <ng-content></ng-content>
  21.     </div>
  22. </div>
  24. //app-democomponent.less
  25. .demo {
  26.     padding: 10px;
  27.     border: 2px solid red;
  29.     h2 {
  30.         margin: 0;
  31.         color: #262626;
  32.     }
  34.     .content {
  35.         padding: 10px;
  36.         margin-top: 10px;
  37.         line-height: 20px;
  38.         color: #FFFFFF;
  39.         background-color: #de7d28;
  41.         &.blue {
  42.             background-color: blue;
  43.         }
  44.     }
  45. }

image.png

1.2.2

  1. //app.component.html
  2. <app-ngcomponent></app-ngcomponent>
  5. //app-ngcomponent.html
  6. <app-democomponent>
  7.         这是外部嵌入的内容
  8. </democomponent>
  11. //app-democomponent.html
  12. <div class="demo">
  13.     <h2>
  14.         demo-component - 可嵌入外部内容的组件
  15.     </h2>
  16.   <div class="content">
  17.         <ng-content></ng-content>
  18.     </div>
  19.     <div class="content blue">
  20.         <ng-content></ng-content>
  21.     </div>
  23. </div>
  24. </div>
  26. //app-democomponent.less
  27. .demo {
  28.     padding: 10px;
  29.     border: 2px solid red;
  31.     h2 {
  32.         margin: 0;
  33.         color: #262626;
  34.     }
  36.     .content {
  37.         padding: 10px;
  38.         margin-top: 10px;
  39.         line-height: 20px;
  40.         color: #FFFFFF;
  41.         background-color: #de7d28;
  43.         &.blue {
  44.             background-color: blue;
  45.         }
  46.     }
  47. }

image.png