zoukankan      html  css  js  c++  java
  • [Angular 8] Keep original DOM structure with ng-container

    ng-container is using for grouping elments together, a bit similar to div.

    If you want to group some elements together, but don't want to break the DOM structure, you can use ng-container.

    For example:

    <p>
      I turned the corner
      <span *ngIf="hero">
        and saw {{hero.name}}. I waved
      </span>
      and continued on my way.
    </p>

    You also have a CSS style rule that happens to apply to a <span> within a <p>aragraph.

    css:

    p span { color: red; font-size: 70%; }

    The p span style, intended for use elsewhere, was inadvertently applied here.

    Another problem: some HTML elements require all immediate children to be of a specific type. For example, the <select> element requires <option> children. You can't wrap the options in a conditional <div> or a <span>.

    <div>
      Pick your favorite hero
      (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
    </div>
    <select [(ngModel)]="hero">
      <span *ngFor="let h of heroes">
        <span *ngIf="showSad || h.emotion !== 'sad'">
          <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
        </span>
      </span>
    </select>

    Using ng-contianer:

    <p>
      I turned the corner
      <ng-container *ngIf="hero">
        and saw {{hero.name}}. I waved
      </ng-container>
      and continued on my way.
    </p>

    <div>
      Pick your favorite hero
      (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
    </div>
    <select [(ngModel)]="hero">
      <ng-container *ngFor="let h of heroes">
        <ng-container *ngIf="showSad || h.emotion !== 'sad'">
          <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
        </ng-container>
      </ng-container>
    </select>

  • 相关阅读:
    前端网站汇总
    更换Sublime Text主题字体
    免费收录网站搜索引擎登录口
    IE6,7,8支持css圆角
    CSS继承—深入剖析
    JavaScript正则表达式大全
    CSS伪元素选择器
    line-height用法总结
    判断腾讯QQ是否在线
    text-overflow使用文字超多div的宽度或超过在table中<td>
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11637556.html
Copyright © 2011-2022 走看看