精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
Angular中模板语法有哪些
这篇文章给大家分享的是有关Angular中模板语法有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联建站专注于石河子企业网站建设,成都响应式网站建设公司,商城网站制作。石河子网站建设公司,为石河子等地区提供建站服务。全流程按需定制制作，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务
插值表达式
@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 '值';
}
}
基插值语法
欢迎来到 {{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
内置结构型指令
*ngIf
@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的用法
显示内容
*ngFor
@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() {
}
}
*ngFor用法
名字列表
ngSwitch
@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() {
}
}
ngSwitch用法
Good
Bad
Exception
内置属性型指令
HTML 属性与 DOM 属性关系
少量的 HTML 属性与 DOM 属性之间有着一对一的映射关系， 如 id；
有些 HTML 属性没有对应的 DOM 属性， 如 colspan；
有些 DOM 属性没有对应的 HTML 属性， 如 textContent；
就算名字相同， HTML 属性和 DOM 属性也不是同一样东西；
HTML 属性的值指定了初始值， DOM 属性的值表示当前值； HTML 属性的值不可改变， DOM 属性的值可以改变。
模板绑定是通过 DOM 属性和事件来工作的， 而不是 HTML 属性。
注意：插值表达式与属性绑定是同一个东西， 插值表达式属于 DOM 属性绑定。
NgClass
@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
};
}
}
NgClass用法
设置多个样式
.saveable {
font-size: 18px;
}
.modified {
font-weight: bold;
}
.special {
background-color: #ff3300;
}NgStyle
@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'
};
}
}
NgStyle用法
用NgStyle批量修改内联样式！
NgModel
@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() {
}
}
NgModel的用法
ngModel只能用在表单类的元素上面
小工具
管道
Angular 内置的常用管道：
uppercase 将字母转换成大写 {{‘aaa’ | uppercase}}
lowercase 将字母转换成小写 {{‘BBB’ | lowercase}}
{{ birthday | date: ‘yyyy-MM-dd HH:mm:ss’}}
{{ pi | number: ‘2.2-2’}}
2.2-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' }}
非空断言
@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() {
}
}
安全取值
名字：{{currentValue?.name}}
感谢各位的阅读！关于“Angular中模板语法有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
当前标题：Angular中模板语法有哪些
浏览地址：http://cdkjz.cn/article/josgsh.html
