angular4自定义组件详解

angular4自定义组件详解

在 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: `

我来自{{address.province}}省,

{{address.city}}市

{{address | json}}

`, })

//定义组件类

export class UserComponent {

　　name = 'name';

　　address = { province: 'province', city: 'city' }

}

//使用构造函数初始化数据

export class UserComponent {

name: string;

address: any;

constructor() {

this.name = 'name';

this.address = {

vbggTPBprovince: '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: `

//UserComponent 的 selector

`,

})

export class AppComponent {}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。