Angular Material 2组件中多选择器的设计原因咨询

Great question—this is a deliberate pattern in Angular Material's component design, and it’s all about improving developer experience and maintaining compatibility. Let’s break down the reasons using your mat-card-header example:

1. Support for Both Kebab-Case and CamelCase Attribute Syntax #

Angular lets you reference component inputs in two valid ways:

• Kebab-case: The HTML-friendly format (mat-card-avatar), which matches how native HTML attributes are structured.
• CamelCase: The TypeScript-friendly format (matCardAvatar), which directly maps to the @Input() property name defined in the component class.

By including both selectors, Angular Material ensures no matter which syntax you prefer (or are accustomed to), your content will correctly project into the intended ng-content slot. For example:

<mat-card-header>
  <!-- Both of these will be picked up by the same ng-content slot -->
  <img mat-card-avatar src="profile.jpg">
  <img matCardAvatar src="profile.jpg">
</mat-card-header>

2. Backward Compatibility #

As Angular Material has evolved, the team has shifted toward kebab-case for template attributes (to align with HTML standards). But they can’t break existing projects that were built using the older camelCase syntax. Including both selectors lets legacy code keep working while guiding new users toward the more compliant format.

3. Flexibility and Developer Convenience #

The library prioritizes being approachable for all skill levels. By supporting multiple selectors, they eliminate the need for developers to memorize exact syntax rules—you can write what feels natural, and it will work as expected.

Under the hood, this uses standard CSS selector logic: multiple selectors separated by commas mean "match any of these." Angular’s ng-content leverages this to target specific content for projection, making the component more flexible for different coding styles.

内容的提问来源于stack exchange，提问作者lachlan.p.jordan