详解angular2 控制视图的封装模式

关于“详解angular2 控制视图的封装模式”的完整攻略，我会从以下几方面进行论述：

1. 什么是控制视图的封装模式
2. 利用指令控制视图的封装模式
3. 利用组件控制视图的封装模式

1. 什么是控制视图的封装模式

控制视图的封装模式是指在 Angular2 中，为了得到更好的代码组织形式和视图控制权，推出了两种视图封装的方式：指令和组件。这两种方式都能够实现代码的高度复用和组织，提高代码的可维护性和可扩展性。

2. 利用指令控制视图的封装模式

指令是 Angular2 中扮演控制单个 DOM 元素行为的角色。用户可以为某个 DOM 元素指定一个指令，当这个元素出现在视图中时，将会自动触发指令的生命周期，并控制该 DOM 元素的行为和显示。指令通过直接操作 DOM 来实现视图的封装和控制。

下面通过一个示例说明如何利用指令控制视图的封装模式：

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
        el.nativeElement.style.backgroundColor = 'yellow';
    }
}

在上述代码中，我们创建了一个名为 HighlightDirective 的指令，作用是添加一个黄色背景色。实现方式是在指令的构造函数中获取元素引用，并通过访问 nativeElement 属性直接修改该元素的样式。

然后在模板中使用 appHighlight 指令，示例如下：

<p appHighlight>我是一段需要高亮的文本</p>

3. 利用组件控制视图的封装模式

组件相比于指令，其作用范围更大，可控制视图中的多个 DOM 元素行为，并且可以嵌套和组合，使得代码更具有层次结构。组件需要在一个父组件模板中定义，并且可以由其他组件引用。

下面通过一个示例说明如何利用组件控制视图的封装模式：

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <h1>欢迎来到{{title}}!</h1>
        <p>所有课程的列表如下：</p>
        <ul>
            <li *ngFor="let course of courses">
                <a href="#">{{course}}</a>
            </li>
        </ul>
    `
})
export class AppComponent {
    title = 'Angular2教程';
    courses = ['课程1', '课程2', '课程3'];
}

在上述代码中，我们创建了一个名为 AppComponent 的组件，它包含一个标题和课程列表，通过 *ngFor 指令循环遍历 courses 数组，并使用插值表达式 {{course}} 将每个元素插入到模板中。

最后，在 Angular2 应用中引用该组件即可控制视图的显示和行为：

<my-app></my-app>

通过上述两种方式的示例，相信读者已经对Angular2中控制视图的封装模式有了更深入的理解。这种方式不仅能够提高代码的复用性和可维护性，还能够使代码更加具有层次结构，方便开发和维护。