在 angular 中,我们可以使用 {{}} 插值语法实现数据绑定。
新建组件
$ ng generate component simple-form --inline-template --inline-style # or $ ng g c simple-form -it -is # 表示新建组件,该组件使用内联模板和内联样式 //会自动为simple-form生成simple-form.component.ts文件,文件中的selector为:app-simple-form,自动添加了app-前缀
输出:
installing component create src/app/simple-form/simple-form.component.spec.ts // 用于单元测试 create src/app/simple-form/simple-form.component.ts // 新建的组件 update src/app/app.module.ts //angular cli 会自动更新 app.module.ts 文件。把新建的组件添加到 ngmodule 的 declarations
数组中
app.module.ts更新后:
@ngmodule({ declarations: [ appcomponent, simpleformcomponent ], ... }) export class appmodule { }
创建 usercomponent 组件
import { component } from '@angular/core'; @component({ //component 装饰器来定义组件的元信息 selector: 'sl-user', template: ` <h2>大家好,我是{{name}}</h2> <p>我来自<strong>{{address.province}}</strong>省, <strong>{{address.city}}</strong>市 </p> <p>{{address | json}}</p>//angular 内置的 json 管道,来显示对象信息 `, }) //定义组件类 export class usercomponent { name = 'name'; address = { province: 'province', city: 'city' } } //使用构造函数初始化数据 export class usercomponent { name: string; address: any; constructor() { this.name = 'name'; this.address = { province: 'province', city: 'city' } } } //接口使用 interface address { province: string; city: string; } export class usercomponent { name: string; address: address; constructor(){ this.name = 'name'; this.address = { province: 'province', city: 'city' } } }
定义数据接口( typescript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(shape)」进行描述。)
interface person { name: string; age: number; } let semlinker: person = { name: 'semlinker', age: 31 };
声明 usercomponent 组件
// ... import { usercomponent } from './user.component';//载入 @ngmodule({ imports: [ browsermodule ], declarations: [ appcomponent, usercomponent],//声明 bootstrap: [ appcomponent ] }) export class appmodule { }
在appcomponent中使用 usercomponent 组件
import { component } from '@angular/core'; @component({ selector: 'my-app', template: ` <sl-user></sl-user> //usercomponent 的 selector `, }) export class appcomponent {}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论