Ionic 2 基础 - 第四课：装饰器

优质

小牛编辑

134浏览

2023-12-01

Ionic 2应用里每个类（后续会讲到）都会有一个装饰器。装饰器看起来是这样子的：

@Component({
    someThing: 'somevalue',
    someOtherThing: [Some, Other, Values]
})

他们看起来好奇怪，但是他们扮演着至关重要的角色。在Ionic 2中他们的角色是给你定义的类class提供元数据metadata，他们通常都是一屁股坐在类头上的，就像这样：

@Decorator({
    /*meta data goes here*/
})
export class MyClass {
    /*class stuff goes here*/
}

这也是你唯一可能看到装饰器的地方，他们纯粹是用来给类添加一些额外信息的（即，他们‘装饰’类）。我们接下来聊聊为什么Ionic 2应用中需要用到他，以及怎么去用。
装饰器的名字本身就很有用，以下是在Ionic 2应用中用到的：

可以给装饰器提供一个对象以提供更多我们想要知道的信息。下面在应用中最普通常见的：

@Component({
    selector: 'home-page',
    templateUrl: 'home.html'
})
export class HomePage {
}

这样类就知道该从哪里拿到他的模板。如果你的模板超级简单，那么你都可以不用建立另外的模板文件，而是直接传入：

@Component({
    template: `<p>Howdy!</p>`
})
export class HowdyPage {
}

有些甚至喜欢在 template 上定义大的模板。由于ES6支持使用反引号（上面包住模板内容的东西）来定义多行字符串，这也是定义大型模板的一个可选方案（而不是丑陋地把大量字符串串联起来）。
现在，我们了解了什么是装饰器以及他用来干什么，接下来我们来看点特别的。

Ionic 2应用中的通用装饰器

我们能用到的装饰器也不是很多。他们的最终目的基本都是简单的描述我们创建的类似什么，这样他就知道他需要导入什么来正常工作。
我们来了解一下我们主要会用到的装饰器，以及他们分别对应的角色。我们目前只是关注装饰器，下一部分才会讨论如何通过类做一些有用的事情。

@Component

我觉得在Ionic 2应用中组件 component的任务比较让人困惑。就像我说的，咱们的应用都是由大量的相互绑定的组件组成。这些组件都包含在咱们的app文件夹内，看起来大概是这个样子的：
home

home.ts
home.html
home.scss

@Component不是Ionic 2特有的，它在Angular 2里面经常用到。Ionic 2提供的大部分功能都是通过左键完成的。例如，在Ionic 2中，如果你想创建一个搜索条，你可以使用Ionic 2提供的这个组件：

<ion-searchbar></ion-searchbar>

你只需要简单的将这个自定义的变迁添加到你的模板就可以了。Ionic 2虽然提供了大量的组件，你还是可以创建自定义的组件的，自定义的组件的装饰器看起来大概是这样子的：

@Component({
    selector: 'my-cool-component'
})

这样一来你就可以直接在模板中这样子用了：

<my-cool-component></my-cool-component>

注意：技术层面上来讲组件必要有一个类定义和一个模板。像管道和数据提供者这样的组件不会在屏幕上显示所以不会有相关的模板，他们仅用于提供其他的功能。虽然这些在技术层面上不能称之为组件，但是你还是需要经常用到的。

@Directive

@Directive装饰品允许你创建自定义的指令。这些装饰器一般看起来是这样子的：

@Directive({
    selector: '[my-selector]'
})

然后在模板中你可以通过在元素是添加这个选择器来触发指令的行为。

<some-element my-selector></some-element>

什么时候用@Component什么时候用@Directive可能会有点容易混淆，因为他们比较像。最简单的方法是如果你想要改变存在的元素的行为，那么请使用directive 指令，如果你想创建一个新的组件，那么请使用component 组件。

@Pipe

@Pipe用来创建自定义的管道以过滤需要展示给用户的数据。他的装饰器看起来是这样的：

@Pipe({
    name: 'myPipe'
})

然后你就可以在模板里面这样去使用：

    <p>{{someString | myPipe}}</p>

这样的话 someString 在展示给用户之前会先经过 myPipe 过滤。

@Injectable用来创建供类使用的服务。例如，我们在制作应用的时候，经常会有用于获取数据保存数据的数据服务 Data Service就是一个典型的此类服务。无需在类中手动编写这些代码，你只需要在要用到的类中注入此数据服务即可，然后再类中调用数据服务的辅助方法。当然，数据服务不是唯一可做的，你可以利用他做任何你想要的事情。
@Injectable通常就是一个@Injectable装饰器蹲在一个类上面：

@Injectable()
export class DataService {
}

重要：请记住，你想做Ionic 2中使用任何东西之前，请先导入（关于导入后续的章节我详细涉及）。像管道，指令，注入（服务）和组件这些东西，他们不但要导入，同时也需要到app.module.ts中声明。这些在制作应用范例的时候会详细解释。

总结

关于装饰器最重要的需要记住的事情是：没多少需要去死记硬背的。装饰器非常强大，你也可以试一试一些看起来比较复杂的配置。随着你对Ionic 2的深入，你的装饰器也会越来越复杂，但是，在开始阶段，你的装饰器主体大概这样就够了：

@Component({
    selector: 'home-page',
    templateUrl: 'home.html'
})

很多人第一眼看到装饰器的时候可能就已经放弃了，因为第一眼看这其实比较奇怪，比较他本身吓人。下一课我们会学习装饰器的犯罪搭档：类。类定义实际上我我们完成所有工作的地方，记住，装饰器在顶部，提供一点点额外的信息。