试用Angular的HTML模板【绝对的新手】

2 年 ago

清, 宇

4 minutes

经常会遇到对HTML模板周围的一些问题感到困惑，所以我会把这些问题记录下来。

数据绑定

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  importData:string = "importMessage"//変数「importData」に「importMessage」を代入
}

<!--変数「importData」を表示する-->
<h1>{{importData}}</h1>

双向数据绑定

接下来是双向数据绑定。
双向即是指从界面端到程序（ts）端，以及从程序端到界面端进行往返传送的方法。
若需双向绑定，则需要添加FormModule。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from "@angular/forms";//ここを追加

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule//ここを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts与常规数据绑定没有区别，只需要准备好变量即可。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'masao';
}

当在input标签中输入值时，该值会被发送到app.component.ts中，然后将其绑定到app.component.ts的name变量的{{name}}上。

<!--ts側へ送られます-->
<input  type="text" [(ngModel)]="name">
<!--ts側から受け取ります-->
<h1>{{name}}</h1>

如果有条件分岐

如果是真的，就显示；如果是假的，就隐藏。

因此需要添加FormModule。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from "@angular/forms";//ここを追加

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule//ここを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

我把变量”flg”设为”false”。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  flg = false;//追加
}

请在*ngIf中指定true或false。

<h1 *ngIf="flg">テキスト1</h1><!--falseなので非表示-->
<h1 *ngIf="!flg">テキスト2</h1><!--trueなので表示-->

当*ngIf=”false”时，将不再在HTML文件中显示。

条件分支转换

显示符合条件的物品。

需要添加FormModule。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from "@angular/forms";//ここを追加

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule//ここを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

我們將男性分配給變量sex作為性別。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  sex = "men";//追加
}

根据选择框中选择的性别，我正在制作一个能根据所选性别改变下方消息的功能。请参考双向数据绑定的机制，将选择框中的值发送到app.component.ts。

<!--selectボックスで値を指定して変数sexに送る-->
<select [(ngModel)]="sex">
  <option value="men">男</option>
  <option value="women">女</option>
  <option value="secret">秘密</option>
</select>

<!--変数sexの中身によって表示を変える-->
<div [ngSwitch]="sex">
  <div *ngSwitchCase="'men'">500円です。</div>
  <div *ngSwitchCase="'women'">300円です。</div>
  <div *ngSwitchDefault></div>
</div>

您可以操控多个显示。

循环处理

重复显示数组的值等。

由于需要FormModule，所以需要添加。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from "@angular/forms";//ここを追加

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule//ここを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

在app.component.ts中，我们会准备一个数组来显示。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  names = ["masao0","masao1","masao2","masao3"];
}

逐一读取并绑定数组。

<ul>
  <li *ngFor="let name of names; let i=index">{{name}}</li><!--ここが繰り返される-->
</ul>

正在显示数组中的所有内容。

添加要素

在这种情况下不需要FormsModule。
您可以将要指定的值赋给变量。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  url = "http://google.co.jp";
}

将变量分配给要素。

<ul>
  <a [href]="url">こちら</a>
</ul>

我们可以看到在href中分配了变量url中的Google URL。

添加CSS

将CSS类分配给标签。

<h1 [ngClass]="{colorstyle:true}">masao1</h1>
<h1 [ngClass]="{colorstyle:false}">masao2</h1>

.colorstyle{
  color:red;
}

增加活动

<button (click)="masao()">クリックイベント</button><!--クリックイベントを追加-->

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  masao(){
    alert('this is masao!');
  }
}

管道

{{text|uppercase}}
<!--uppercaseは大文字に変換する-->

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  text:string = "masao";
}

大写字母显示为Masao。

自制标签

我会制作一个组件。

kuniatsu$ ng generate component origintag

我会编辑新建的组件的HTML文件。
不是在app.component.html中，而是在origintag.component.html中。

<p>
this is origin.
</p>

自制的标签是使用选择器名称。

<app-origintag></app-origintag>