import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.less']
})
export class NewsComponent implements OnInit {
title:string='我是新闻组件'
message:any='我是信息'
public userinfo:any = {
username:'alice',
age:20
}
public content='<h2>我是html标签</h2>'
public list:any[] = ['苹果',11,'香蕉']
constructor() { }
ngOnInit(): void {
}
}
<div>
<h1>-------------angualr模板里面绑定数据----------</h1>
<div class="title"> {{title}}</div>
{{userinfo.username}}
{{message}}
<h1>-------------angualr模板里面绑定属性----------</h1>
<div title="提示">测试</div>
<div [title]="title">
属性
</div>
<div [title]="title">
{{message}}
</div>
<h1>--------------------双向数据绑定--------------</h1>
<input type="text" [(ngModel)]='keyword'>
{{keyword}}
<button (click)="changeKeyword($event)">改变keyword的值</button>
<h1>---------------angualr模板里面绑定Html-------------</h1>
<span [innerHTML]='content'></span>
<h1>angualr模板里面做简单运算</h1>
1+2={{1+2}}
<br />
</div>