zoukankan      html  css  js  c++  java
  • [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular

    The Angular <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

    When we using Content Projection in a DUMP component:

    <div class="card" style=" 18rem;">
      <ng-content select=".heading"> </ng-content>
      <div class="card-body">
       <ng-content select=".body"> </ng-content>
      </div>
    </div>

    We are using <ng-content> here to get projected element from the SMAR component:

    <app-card>
      <div class="heading"> <!-- add a extra div with class selector to wrap the elements -->
        <img class="card-img-top" src="https://picsum.photos/g/200/300" alt="Card image cap">
      </div>
      <div class="body"> <!-- add a extra div with class selector to wrap the elements -->
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </app-card>

    It ends up we have a extra div in the DOM, to remove that extra div, we just need to replace 'div' with 'ng.container':

    <app-card>
      <ng-container class="heading">
        <img class="card-img-top" src="https://picsum.photos/g/200/300" alt="Card image cap">
      </ng-container>
      <ng-container class="body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </ng-container>
    </app-card>
  • 相关阅读:
    数组名和指针区别(还有数组退化等)
    无法从“const char *”转换为“char *”
    c语言数组初始化问题
    c语言实现atoi和itoa函数。
    不使用临时变量交换两个整数
    hdu 1282回文数猜想
    Android仿WIN8系统磁贴点击下沉倾斜效果
    Android Studio使用心得
    处理json中影响解析的多余引號
    我也来开发2048之主界面设计
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9221430.html
Copyright © 2011-2022 走看看