Angular의 템플릿 구문에 대한 자세한 설명

이 글에서는 Angular의 템플릿 구문에 대해 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

추천 관련 튜토리얼: "angular tutorial"

보간 표현식

• test-interpolation.comComponent.ts

@Component({
  selector: 'app-test-interpolation',
  templateUrl: './test-interpolation.component.html',
  styleUrls: ['./test-interpolation.component.css']
})
export class TestInterpolationComponent implements OnInit {

  title = '插值表达式';

  constructor() { }

  ngOnInit() {
  }

  getValue(): string {
    return '值';
  }
}

• test-interpolation.comComponent.html

rrre

템플릿 변수

• test-template-variables.comComponent.ts

<div class="panel panel-primary">
  <div class="panel-heading">基插值语法</div>
  <div class="panel-body">
    <h3>
      欢迎来到 {{title}}！
    </h3>
    <h3>2+2 = {{2 + 2}}</h3>
    <h3>调用方法{{getValue()}}</h3>
  </div>
</div>

• test-template-variables.comComponent.html

@Component({
  selector: 'app-test-template-variables',
  templateUrl: './test-template-variables.component.html',
  styleUrls: ['./test-template-variables.component.css']
})
export class TestTempRefVarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  public saveValue(value: string): void {
    console.log(value);
  }
}

값 바인딩, 이벤트 바인딩, 양방향 바인딩

값 바인딩 :[ ]

• test-value-bind.comComponent.ts

<div class="panel panel-primary">
  <div class="panel-heading">模板变量</div>
  <div class="panel-body">
    <input #templateInput>
    <p>{{templateInput.value}}</p>
    <button class="btn btn-success" (click)="saveValue(templateInput.value)">局部变量</button>
  </div>
</div>

• test-value-bind.comComponent.html

@Component({
  selector: 'app-test-value-bind',
  templateUrl: './test-value-bind.component.html',
  styleUrls: ['./test-value-bind.component.css']
})
export class TestValueBindComponent implements OnInit {

  public imgSrc = './assets/imgs/1.jpg';

  constructor() { }

  ngOnInit() {
  }
}

이벤트 바인딩: ()

• test-event-bind-Component.ts

<div class="panel panel-primary">
  <div class="panel-heading">单向值绑定</div>
  <div class="panel-body">
    <img [src]="imgSrc" />
  </div>
</div>

• test-event-bind.comComponent.html

@Component({
  selector: 'app-test-event-binding',
  templateUrl: './test-event-binding.component.html',
  styleUrls: ['./test-event-binding.component.css']
})
export class TestEventBindingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  public btnClick(event: any): void {
    console.log(event + '测试事件绑定！');
  }
}

양방향 바인딩: [()]

• test-twoway-bind.comComponent.ts

fcbd673a522047e992aa60f819a1e8c0
    666a865bc6b58bd00bd75fb3013bf55d事件绑定16b28748ea4df4d9c2150843fecfba68
    4707d5d5b651f1cbaed9f4528beadc49
        bbad6abca5167ac9b50579c805497f98点击按钮65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

• test- twoway- 바인딩.comComponent.html

@Component({
  selector: 'app-test-twoway-binding',
  templateUrl: './test-twoway-binding.component.html',
  styleUrls: ['./test-twoway-binding.component.css']
})
export class TestTwowayBindingComponent implements OnInit {

  public fontSizePx = 14;

  constructor() { }

  ngOnInit() {
  }

}

• font-resizer.comComponent.ts

<div class="panel panel-primary">
  <div class="panel-heading">双向绑定</div>
  <div class="panel-body">
    <app-font-resizer [(size)]="fontSizePx"></app-font-resizer>
    <div [style.font-size.px]="fontSizePx">Resizable Text</div>
  </div>
</div>

• font-resizer.comComponent.html

@Component({
  selector: 'app-font-resizer',
  templateUrl: './font-resizer.component.html',
  styleUrls: ['./font-resizer.component.css']
})
export class FontResizerComponent implements OnInit {

  @Input()
  size: number | string;

  @Output()
  sizeChange = new EventEmitter<number>();

  constructor() { }

  ngOnInit() {
  }

  decrement(): void {
    this.resize(-1);
  }

  increment(): void {
    this.resize(+1);
  }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}

내장 구조 지시문

*ngIf

• 테스트 -ng-if.comComponent.ts

<div style="border: 2px solid #333">
  <p>这是子组件</p>
  <button (click)="decrement()" title="smaller">-</button>
  <button (click)="increment()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>

• test-ng-if.comComponent.html

@Component({
  selector: 'app-test-ng-if',
  templateUrl: './test-ng-if.component.html',
  styleUrls: ['./test-ng-if.component.css']
})
export class TestNgIfComponent implements OnInit {

  isShow = true;

  constructor() { }

  ngOnInit() {
  }
}

*ngFor

• test-ng-for.comComponent.ts

<div class="panel panel-primary">
  <div class="panel-heading">*ngIf的用法</div>
  <div class="panel-body">
    <p *ngIf="isShow" style="background-color:#ff3300">显示内容</p>
  </div>
</div>

• test- ng -for.comComponent.html

@Component({
  selector: 'app-test-ng-for',
  templateUrl: './test-ng-for.component.html',
  styleUrls: ['./test-ng-for.component.css']
})
export class TestNgForComponent implements OnInit {

  races = [
    {name: 'star'},
    {name: 'kevin'},
    {name: 'kent'}
  ];

  constructor() { }

  ngOnInit() {
  }

}

ngSwitch

• test-ng-switch.comComponent.ts

<div class="panel panel-primary">
  <div class="panel-heading">*ngFor用法</div>
  <div class="panel-body">
    <h3>名字列表</h3>
    <ul>
      <li *ngFor="let name of names;let i=index;">
       {{i}}-{{name.name}}
      </li>
    </ul>
  </div>
</div>

• test-ng-switch.comComponent.html

@Component({
  selector: 'app-test-ng-switch',
  templateUrl: './test-ng-switch.component.html',
  styleUrls: ['./test-ng-switch.component.css']
})
export class TestNgSwitchComponent implements OnInit {

  status = 1;

  constructor() { }

  ngOnInit() {
  }

}

내장 속성 지시문

HTML 속성과 DOM 속성의 관계

• 몇몇 HTML 속성과 id와 같은 DOM 속성 사이에는 일대일 매핑 관계가 있습니다.
• 일부 HTML 속성에는 해당 DOM이 없습니다.
• textContent와 같은 일부 DOM 속성에는 해당 HTML 속성이 없습니다.
• 이름이 동일하더라도 HTML 속성과 DOM 속성은 동일하지 않습니다. 속성은 초기 값을 지정하고 DOM 속성의 값은 현재 값을 나타냅니다. HTML 속성의 값은 변경할 수 없으며 DOM 속성의 값은 변경할 수 있습니다.
• 템플릿 바인딩은 HTML 속성이 아닌 DOM 속성 및 이벤트를 통해 작동합니다.

참고:

보간 표현식과 속성 바인딩은 동일하며 보간 표현식은 DOM 속성 바인딩에 속합니다. ㅋㅋㅋ NgStyle

test-ng-style.comComponent.ts

<div class="panel panel-primary">
  <div class="panel-heading">ngSwitch用法</div>
  <div class="panel-body">
    <div [ngSwitch]="status">
      <p *ngSwitchCase="0">Good</p>
      <p *ngSwitchCase="1">Bad</p>
      <p *ngSwitchDefault>Exception</p>
    </div>
  </div>
</div>

test-ng-style.comComponent.html

• @Component({
    selector: 'app-test-ng-class',
    templateUrl: './test-ng-class.component.html',
    styleUrls: ['./test-ng-class.component.scss']
  })
  export class TestNgClassComponent implements OnInit {
    public currentClasses: {};
  
    public canSave = true;
    public isUnchanged = true;
    public isSpecial = true;
  
    constructor() { }
  
    ngOnInit() {
      this.currentClasses = {
        'saveable': this.canSave,
        'modified': this.isUnchanged,
        'special': this.isSpecial
      };
    }
  }

NgModel

test-ng-model.comComponent.ts

• <div class="panel panel-primary">
    <div class="panel-heading">NgClass用法</div>
    <div class="panel-body">
      <div [ngClass]="currentClasses">设置多个样式</div>
      <div [class.modified]=&#39;true&#39;></div>
    </div>
  </div>

test-ng-model.comComponent.html

.saveable {
    font-size: 18px;
}

.modified {
    font-weight: bold;
}

.special {
    background-color: #ff3300;
}

widget

pipeline

Angular 내장 공통 파이프:

대문자 및 소문자

• 대문자 문자를 대문자로 변환 사례 {

{'aaa' | 대문자}}

소문자 문자를 소문자로 변환합니다. {
• {'BBB' | 소문자}}

Date

{{ 생일 | 날짜: 'yyyy-MM-dd HH:mm ss'}}

number

{

{ pi | number: '2.2-2'}} 2.2-2: 정수 2개와 소수점 이하 2자리를 유지한다는 의미입니다.
2-2: 최소 소수점 2자리, 최대 소수점 2자리를 나타냅니다.

예

test-pipe.comComponent.ts

@Component({
  selector: 'app-test-ng-style',
  templateUrl: './test-ng-style.component.html',
  styleUrls: ['./test-ng-style.component.css']
})
export class TestNgStyleComponent implements OnInit {

  currentStyles: { };
  canSave = false;
  isUnchanged = false;
  isSpecial = false;

  constructor() { }

  ngOnInit() {
    this.currentStyles = {
      'font-style': this.canSave ? 'italic' : 'normal',
      'font-weight': !this.isUnchanged ? 'bold' : 'normal',
      'font-size': this.isSpecial ? '36px' : '12px'
    };
  }

}

test-pipe.comComponent.html

<div class="panel panel-primary">
  <div class="panel-heading">NgStyle用法</div>
  <div class="panel-body">
    <div [ngStyle]="currentStyles">
      用NgStyle批量修改内联样式！
    </div>
    <div [style.font-size]="isSpecial? &#39;36px&#39; : &#39;12px&#39;"></div>
  </div>
</div>

null이 아닌 어설션

test-not-null-assert.comComponent.ts

@Component({
  selector: 'app-test-ng-model',
  templateUrl: './test-ng-model.component.html',
  styleUrls: ['./test-ng-model.component.css']
})
export class TestNgModelComponent implements OnInit {

  name = 'kevin';

  constructor() { }

  ngOnInit() {
  }

}

test-not-null-assert.comComponent.html

<div class="panel panel-primary">
    <div class="panel-heading">NgModel的用法</div>
    <div class="panel-body">
        <p class="text-danger">ngModel只能用在表单类的元素上面</p>
        <input type="text" name="name" [(ngModel)]="name">
    </div>
</div>

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 교육
• 을 방문하세요! !

위 내용은 Angular의 템플릿 구문에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!