1つは、アングラーコンポーネントを作成して使用することです。
//创建组件
ng g component components/home
//使用组件
<app-home></app-home>
2、Angularはデータをバインドします
2.データテキストバインディング
使用{
{}}符合,如:
<h1>
{
{title}}
</h1>
<div>
1+1={
{1+1}}
</div>
2.htmlをバインドします
//ts文件里定义
this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"
//页面调用h
<div [innerHTML]="h"></div>
3.バインディング属性
<div [id]="id" [title]="msg">测试</div>
3、データループ* ngFor
1. * ng通常のループの場合
<ul>
<li *ngFor="let item of list">
{
{item}}
</li>
</ul>
2.ループ時にキーを設定します
<ul>
<li *ngFor="let item of list;let i = index;">
{
{item}} --{
{i}}
</li>
</ul>
3.テンプレートループデータ
<ul>
<li template="ngFor let item of list">
{
{item}}
</li>
</ul>
4、条件付き判断* ngIf
<p *ngIf="flag">这是 ngIF 判断是否为true,为true显示,否则不显示</p>
或
<p template="ngIf flag">这是 ngIF 判断是否为true,为true显示,否则不显示</p>
5、* ngSwitch
<ul [ngSwitch]="info">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li>
<li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>
6.実行イベント(クリック)=” getData()”
//HTML页面写
<button class="button" (click)="getData()">点击按钮触发事件</button>
<button class="button" (click)="setData()">点击按钮设置数据</button>
//ts文件里写
getData(){ /*自定义方法获取数据*/
//获取
alert(this.msg);
}
setData(){
//设置值
this.msg='这是设置的值';
}
セブン、フォームイベント
//HTML页面
<input type="text" (keyup)="keyUpFn($event)"/>
//ts 文件
keyUpFn(e){
console.log(e)
}
8つの双方向データバインディング
双方向のデータバインディングをapp.module.tsファイルに導入する必要があります
// app.module.ts文件
import { FormsModule } from '@angular/forms';
// 引入模组
imports: [
BrowserModule,
FormsModule
]
// HTML文件
<input type="text" [(ngModel)]="inputValue"/>
{
{inputValue}}
ナイン、[ngClass]、[ngStyle]
[ngClass]:
<div [ngClass]="{'red': true, 'blue': false}">
这是一个 div
</div>
public flag=false;
<div [ngClass]="{'red': flag, 'blue': !flag}">
这是一个 div
</div>
public arr = [1, 3, 4, 5, 6];
<ul>
<li *ngFor="let item of arr, let i = index">
<span [ngClass]="{'red': i==0}">{
{item}}</span>
</li>
</ul>
[ngStyle]:
<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>
public attr='red';
<div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>
10.パイプライン
public today=new Date();
<p>{
{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>