Angular组件重用与封装的艺术-CSDN博客

本文链接：https://blog.csdn.net/weixin_42160645/article/details/147877096

背景简介

在前端开发中，组件的重用性是提高开发效率和代码质量的关键因素之一。在Angular框架中，组件的封装和复用更是构建高效、可维护应用的核心。本文基于《构建可复用组件》章节内容，深入探讨Angular中组件的创建、封装及其在实际应用中的运用。

组件输入属性

组件的输入属性是组件与外部世界通信的接口，它允许外部向组件传递数据。在Angular中，我们使用 @Input() 装饰器来声明输入属性。例如，创建一个按钮组件时，可以将它的值属性绑定到组件的一个输入属性上：

@Component({
  selector: 'app-button',
  template: '<button [value]="title">提交</button>'
})
export class ButtonComponent {
  @Input() title: string;
}

在上述代码中， title 是一个输入属性，外部代码可以通过属性绑定的方式向其传递数据。对于自定义组件，我们同样可以通过 @Input() 装饰器来创建公共API，从而实现组件的复用。

Aliasing

有时，我们可能希望使用不同于内部属性名称的别名来暴露输入属性。Angular允许我们通过在 @Input() 装饰器中指定别名来实现这一点：

@Component({
  selector: 'app-rating',
  template: '<rating [rating-value]="4"></rating>'
})
export class RatingComponent {
  @Input('rating-value') rating: number;
}

模板

模板是组件的视图部分，它定义了组件的外观和结构。我们可以直接在组件的装饰器中内联模板，但对于大型模板，将其分离到单独的文件中是一种更好的做法：

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html'
})
export class RatingComponent {
  // ...
}

在分离模板到独立文件后，组件的自包含性更强，便于重用和维护。

样式

组件的样式是组件的另一个重要方面。Angular允许我们在组件的装饰器中定义样式，并且这些样式默认是组件作用域的，不会影响到外部元素或其他组件：

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html',
  styles: [`
    .glyphicon-star {
      color: orange;
    }
  `]
})
export class RatingComponent {
  // ...
}

示例应用

在实际应用中，组件的复用和封装是通过创建具体的示例来体现的。例如，在本章节中，我们创建了一个评分组件，并在一个产品列表中复用了它：

@Component({
  selector: 'app-products',
  template: `
    <h2>Products</h2>
    <div *ngFor="let product of products">
      <product [data]="product"></product>
    </div>
  `
})
export class ProductsComponent {
  products = ProductService.getProducts();
}

在这个示例中，我们使用 *ngFor 指令来遍历一个产品数组，并将每个产品对象传递给产品组件，从而实现了组件的复用。同时，我们通过服务（Service）来管理数据，进一步分离了数据获取和视图展示的职责，增强了组件的独立性和可测试性。