1. 组件元素： Angular 应用程序的主要构建块是组件。一个组件本质上是一个带有模板、样式和行为的自定义 HTML 元素。通过 @Component 装饰器，你可以将一个 TypeScript 类标记为组件，并通过选择器将其嵌入到模板中，形成一个自定义元素。
@Component({
selector: 'app-my-component',
template: '<p>This is my custom component.</p>',
styles: ['p { color: red; }']
})
export class MyComponent { }
在模板中使用：
<app-my-component></app-my-component>
2. HTML 元素： Angular 应用程序可以包含标准的 HTML 元素，这些元素可以直接使用，也可以与 Angular 组件一起使用。Angular 会处理这些 HTML 元素的渲染和交互。
<div>
<p>Standard HTML element</p>
<app-my-component></app-my-component>
</div>
3. 指令元素： Angular 指令是一种用于向 DOM 元素添加行为或修改其外观的方式。指令可以看作是 Angular 元素的增强。
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
在模板中使用：
<p appHighlight>Highlighted text</p>
4. ng-container 元素： ng-container 是一个 Angular 内置元素，它本身不会渲染任何东西。它通常用于包装一组元素，以便应用结构指令（如 *ngIf、*ngFor）而无需引入多余的 HTML 元素。
<ng-container *ngIf="condition">
<p>Show this paragraph if condition is true.</p>
</ng-container>
5. ng-content 元素： ng-content 是用于内容投影的 Angular 内置元素。它允许在父组件中传递内容到子组件的指定位置。
@Component({
selector: 'app-custom-container',
template: '<div><ng-content></ng-content></div>'
})
export class CustomContainerComponent { }
在模板中使用：
<app-custom-container>
<p>Content projected into the custom container.</p>
</app-custom-container>
这些元素共同构成了 Angular 应用程序的结构，并允许你创建模块化、可重用和可维护的代码。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4917/Angular