Angular のテンプレート構文の詳細な説明

この記事では、Angular のテンプレート構文について詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連チュートリアルの推奨事項: 「angular チュートリアル」

補間式

• test-interpolation.component.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.component.html

  
基插值语法
  

    

      欢迎来到 {{title}}！
    
    
2+2 = {{2 + 2}}
    
调用方法{{getValue()}}
  

テンプレート変数

• @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);
    }
  }

  ログイン後にコピー

• 
    
  模板变量
    
  
      
      
  {{templateInput.value}}
      局部变量
    
  

  ログイン後にコピー

値バインディング: []

• @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() {
    }
  }

  ログイン後にコピー

• 
    
  单向值绑定
    
  
      
    
  

  ログイン後にコピー

• @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 + '测试事件绑定！');
    }
  }

  ログイン後にコピー

• 
      
  事件绑定
      
  
          点击按钮
      
  

  ログイン後にコピー

• @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() {
    }
  
  }

  ログイン後にコピー

• 
    
  双向绑定
    
  
      
      
  Resizable Text
    
  

  ログイン後にコピー

• @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();
  
    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);
    }
  }

  ログイン後にコピー

• 
    
  这是子组件
    -
    +
    FontSize: {{size}}px
  

  ログイン後にコピー

• @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() {
    }
  }

  ログイン後にコピー

• 
    
  *ngIf的用法
    
  
      
  显示内容
    
  

  ログイン後にコピー
*

##test-ng-for.component.ts

@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() {
  }

}

ログイン後にコピー
test-ng-for.component.html

  
*ngFor用法
  

    
名字列表
    

      

       {{i}}-{{name.name}}
      
    
  

ログイン後にコピー
ngSwitch

test-ng-switch.component.ts

@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() {
  }

}

ログイン後にコピー
test-ng-switch.component.html

  
ngSwitch用法
  

    

      
Good
      
Bad
      
Exception
    
  

ログイン後にコピー
組み込み属性ディレクティブ

# # HTML 属性と DOM 属性の間の関係

少数の HTML 属性と DOM 属性 (id など) の間には 1 対 1 のマッピング関係があります;

• 一部の DOM 属性には、textContent などの対応する HTML 属性がありません;
• 名前が同じであっても、HTML 属性とDOM 属性は同じものではありません。
• HTML 属性の値は初期値を指定し、DOM 属性の値は現在の値を示します。HTML 属性の値は変更できません。 DOM属性の変更が可能です。
• テンプレート バインディングは、HTML 属性ではなく、DOM プロパティとイベントを通じて機能します。
• 注:
補間式と属性バインディングは同じものであり、補間式は DOM 属性バインディングに属します。

NgClass

test-ng-class.component.ts

@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
    };
  }
}

• test-ng-class。 component.html

  
NgClass用法
  

    
设置多个样式
    

  

• test-ng-class.component.less

.saveable {
    font-size: 18px;
}

.modified {
    font-weight: bold;
}

.special {
    background-color: #ff3300;
}

• NgStyle

test-ng-style.component.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-ng-style.component.html

  
NgStyle用法
  

    

      用NgStyle批量修改内联样式！
    
    

  

• NgModel

test-ng-model.component.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-ng-model.component.html

    
NgModel的用法
    

        
ngModel只能用在表单类的元素上面
        
    

ログイン後にコピー

ウィジェット

パイプライン

大文字と小文字

大文字 文字を大文字に変換します {
• {'aaa' | 大文字}}
小文字 文字を小文字に変換します {

##日付

##{

#number

{

{ pi |number: '2.2-2'}}

2-2: 小数点以下 2 桁以下、最大 2 桁を示します。

例

test-pipe.component.ts

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

  currentTime: Date = new Date();
  
  str = 'aaa';

  money = 34.567;


  constructor() {
  }

  ngOnInit() {
    window.setInterval(
      () => { this.currentTime = new Date() }
      , 1000);
  }
}

ログイン後にコピー

test-pipe.component.html

    
管道的用法
    

      {{ currentTime | date:'yyyy-MM-dd HH:mm:ss' }}
    
    

      {{ str | uppercase }}
    
    

      {{ money | number: '2.2-2' }}
    

• 非 null アサーション

@Component({
  selector: 'app-test-safe-nav',
  templateUrl: './test-not-null-assert.component.html',
  styleUrls: ['./test-not-null-assert.component.css']
})
export class TestSafeNavComponent implements OnInit {

  public currentValue: any = null;

  constructor() { }

  ngOnInit() {
  }

}

test-not-null-assert .component.html

  
安全取值
  

    名字：{{currentValue?.name}}
  

プログラミング関連の知識については、
• プログラミング教育
をご覧ください。 ！

以上がAngular のテンプレート構文の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。