Web前端►框架►Angular

Angular中的模板语法

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/27/Angular%E4%B8%AD%E7%9A%84%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95/

摘要

本文主要讲述了：

  1. textContent
  2. HTML 特性
  3. DOM 属性

正文

想要在组件的模板文件中，使用组件实例的实例属性或原型方法，对应的访问修饰符必须为public

textContent

示例：

输入：

my-angular/src/app/app.component.html

1
<div>{{ foo }}</div>

my-angular/src/app/app.component.ts

1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  foo = 'hello, jsweibo';
}

输出：

1
2
3
<app-root>
  <div>hello, jsweibo</div>
</app-root>

HTML 特性

示例：

输入：

my-angular/src/app/app.component.html

1
<img [src]="foo" />

my-angular/src/app/app.component.ts

1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  foo = 'https://www.baidu.com/img/bd_logo1.png';
}

输出：

1
2
3
<app-root>
  <img src="https://www.baidu.com/img/bd_logo1.png" />
</app-root>

DOM 属性

示例：

输入：

my-angular/src/app/app.component.html

1
<div [innerHTML]="foo"></div>

my-angular/src/app/app.component.ts

1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  foo = '<div>hello, jsweibo</div>';
}

输出：

1
2
3
4
5
<app-root>
  <div>
    <div>hello, jsweibo</div>
  </div>
</app-root>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/27/Angular%E4%B8%AD%E7%9A%84%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95/

本文对你有帮助？请支持我

支付宝
微信