angular4自定义组件详解

在 Angular 中，我们可以使用 {{}} 插值语法实现数据绑定。

新建组件

rush:js;"> $ 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-前缀

输出:

rush:js;"> 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更新后：

rush:js;"> @NgModule({ declarations: [ AppComponent,SimpleFormComponent ],... }) export class AppModule { }

创建 UserComponent 组件

rush:js;"> import { Component } from '@angular/core';

@Component({ //Component 装饰器来定义组件的元信息
selector: 'sl-user',template: `

大家好，我是{{name}}

我来自

{{address.province}}

省,

{{address.city}}

市

　　

{{address | json}}

//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）」进行描述。）

rush:js;"> interface Person { name: string; age: number; }

let semlinker: Person = {
name: 'semlinker',age: 31
};

声明 UserComponent 组件

rush:js;"> // ... import { UserComponent } from './user.component';//载入 @NgModule({ imports: [ browserModule ],declarations: [ AppComponent,UserComponent],//声明 bootstrap: [ AppComponent ] }) export class AppModule { }

在AppComponent中使用 UserComponent 组件

rush:js;"> import { Component } from '@angular/core';

@Component({
selector: 'my-app',template: <sl-user></sl-user> //UserComponent 的 selector ,})
export class AppComponent {}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。