第四章　内建组件

前端开发作者： 2024-08-25 19:20:01

介绍angular2提供了很多内建的组件,在这一章,我们会分别介绍它们,并展示一些怎么使用它们的例子. :fa-info-circle:内建组件可以直接导入到项目中来,而不需要像我们前面介绍一样使用directives导入NgIf当你想要根据一个特定的条件显示或者隐藏一个组件的时候,你可以使用Ng

<div *ngIf="false" > </div> <!-- 绝不显示 -->
< div * ngIf="a > b" > </div> <!-- 当A大于B的时候显示 -->
< div * ngIf="str == 'yes'" > </div> <!-- 如果字符串值为yes的时候显示 -->
< div * ngIf="myFunc()" > </div> <!-- 如果myFunc函数返回true的时候显示 -->

<div class="container">
    <div *ngIf="myVar == 'A'">Var is A</div>
    <div *ngIf="myVar == 'B'">Var is B</div>
    <div *ngIf="myVar != 'A' && myVar != 'B'">Var is something else</div>
</div>

<div class="container">
    <div *ngIf="myVar == 'A'">Var is A</div>
    <div *ngIf="myVar == 'B'">Var is B</div>
    <div *ngIf="myVar == 'C'">Var is C</div>
    <div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'">Var is something els\ e
    </div>
  </div>

<div class="container" [ngSwitch]="myVar">
    <div *ngSwitchWhen="'A'">Var is A</div>
    <div *ngSwitchWhen="'B'">Var is B</div>
    <div *ngSwitchDefault>Var is something else</div>
  </div>

<div class="container" [ngSwitch]="myVar">
    <div *ngSwitchWhen="'A'">Var is A</div>
    <div *ngSwitchWhen="'B'">Var is B</div>
    <div *ngSwitchWhen="'C'">Var is C</div>
    <div *ngSwitchDefault>Var is something else</div>
  </div>

code/built_in_components/ng_switch/app.ts

@Component({
  selector: 'switch-sample-app',template: `
    <h4 class="ui horizontal divider header">
      Current choice is {{ choice }}
    </h4>

    <div class="ui raised segment">
      <ul [ngSwitch]="choice">
        <li *ngSwitchWhen="1">First choice</li>
        <li *ngSwitchWhen="2">Second choice</li>
        <li *ngSwitchWhen="3">Third choice</li>
        <li *ngSwitchWhen="4">Fourth choice</li>
        <li *ngSwitchWhen="2">Second choice,again</li>
        <li *ngSwitchDefault>Default choice</li>
      </ul>
    </div>

    <div style="margin-top: 20px;">
      <button class="ui primary button" (click)="nextChoice()">
        Next choice
      </button>
    </div>
  `
})
class SwitchSampleApp {
  choice: number;

  constructor() {
    this.choice = 1;
  }

  nextChoice() {
    this.choice += 1;

    if (this.choice > 5) {
      this.choice = 1;
    }
  }
}

code/built_in_components/ng_style/app.ts

<div [style.background-color]="'yellow'"> Uses fixed yellow background
</div>

code/built_in_components/ng_style/app.ts

<div [ngStyle]="{color: 'white','background-color': 'blue'}"> Uses fixed white text on blue background
</div>

code/built_in_components/ng_style/app.ts

<div class="ui input">
    <input type="text" name="color" value="{{color}}" #colorinput>
  </div>
  <div class="ui input">
    <input type="text" name="fontSize" value="{{fontSize}}" #fontinput>
  </div>

code/built_in_components/ng_style/app.ts

<div>
  <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
red text
  </span>
</div>

code/built_in_components/ng_style/app.ts

<h4 class="ui horizontal divider header"> ngStyle with object property from variable
</h4>
<div>
  <span [ngStyle]="{color: colorinput.value}">
{{ colorinput.value }} text </span>
</div>
<h4 class="ui horizontal divider header"> style from variable
</h4>
<div [style.background-color]="colorinput.value" style="color: white;">
  {{ colorinput.value }} background
</div>

apply(color,fontSize) {
    this.color = color;
    this.fontSize = fontSize;
}

.bordered {
border: 1px dashed black; background-color: #eee;
}

<div [ngClass]="{bordered: false}">This is never bordered</div> 
<div [ngClass]="{bordered: true}">This is always bordered</div>

<div [ngClass]="{bordered: isBordered}">
Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>

toggleBorder() {
    this.isBordered = !this.isBordered;
    this.classesObj = {
      bordered: this.isBordered
    };
}

<div [ngClass]="classesObj">
Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}
</div>

<div class="base" [ngClass]="['blue','round']"> 
    This will always have a blue background and round corners
</div>

this.classList = ['blue','round'];

<div class="base" [ngClass]="classList">
This is {{ classList.indexOf('blue') > -1 ? "" : "NOT" }} blue and {{ classList.indexOf('round') > -1 ? "" : "NOT" }} round
</div>

<div class="base" [ngClass]="['blue','round']"> 
    This will always have a blue background and round corners
</div>

this.cities = ['Miami','Sao Paulo','New York'];

<h4 class="ui horizontal divider header"> 
    Simple list of strings
</h4>
<div class="ui list" *ngFor="let c of cities"> 
    <div class="item">{{ c }}</div>
</div>

this.people = [
      { name: 'Anderson',age: 35,city: 'Sao Paulo' },{ name: 'John',age: 12,city: 'Miami' },{ name: 'Peter',age: 22,city: 'New York' }
];

 <h4 class="ui horizontal divider header"> List of objects</h4>
  <table class="ui celled table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tr *ngFor="let p of people">
      <td>{{ p.name }}</td>
      <td>{{ p.age }}</td>
      <td>{{ p.city }}</td>
    </tr>
  </table>

this.peopleByCity = [
  {
    city: 'Miami',people: [
      { name: 'John',age: 12 },{ name: 'Angel',age: 22 }
    ]
  },{
    city: 'Sao Paulo',people: [
      { name: 'Anderson',age: 35 },{ name: 'Felipe',age: 36 }
    ]
  }];

<div *ngFor="let item of peopleByCity">
<h2 class="ui header">{{ item.city }}</h2>

<table class="ui celled table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tr *ngFor="let p of item.people">
      <td>{{ p.name }}</td>
      <td>{{ p.age }}</td>
    </tr>
  </table>

<h4 class="ui horizontal divider header"> Nested data
</h4>
  <div *ngFor="let item of peopleByCity">
    <h2 class="ui header">{{ item.city }}</h2>
    <table class="ui celled table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tr *ngFor="let p of item.people">
        <td>{{ p.name }}</td>
        <td>{{ p.age }}</td>
      </tr>
    </table>
  </div>

过去索引

<div class="ui list" *ngFor="let c of cities; let num = index"> 
    <div class="item">{{ num+1 }} - {{ c }}</div>
</div>

  <div>
    <span class="bordered">{{ content }}</span> <span class="pre" ngNonBindable>
&larr; This  is what {{ content }} rendered
    </span>
  </div>