在Angular中，封装基础组件通常是通过创建自定义Angular组件来实现的。这些自定义组件可以包含通用的功能和样式，然后可以在应用中多次重复使用。以下是一个简单的示例，说明如何封装一个基础组件。
假设我们要创建一个通用的警告框组件，它可以在应用中的不同部分显示不同的警告消息。首先，我们将创建一个自定义的 alert 组件。
1、创建 Alert 组件：
使用 Angular CLI 或手动创建一个新的 Angular 组件，比如 alert.component.ts，并添加相应的 HTML 模板和 CSS 样式。
// alert.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.css']
})
export class AlertComponent {
@Input() message: string;
}
2、创建 Alert 组件的模板：
创建一个 alert.component.html 文件，用于定义警告框的HTML模板。
<!-- alert.component.html -->
<div class="alert">
{{ message }}
</div>
3、创建样式文件：
创建一个 alert.component.css 文件，定义警告框的样式。
/* alert.component.css */
.alert {
background-color: #f44336;
color: white;
padding: 10px;
border-radius: 5px;
}
4、使用 Alert 组件：
在应用中使用 app-alert 标签，将警告框组件嵌套到其他组件中。例如，如果我们要在应用的某个组件中显示警告框：
<!-- some-component.html -->
<app-alert message="This is a warning message"></app-alert>
这样，我们就成功地创建了一个可重用的 Alert 组件。无论在应用的哪个地方需要显示警告消息，都可以简单地使用 标签。
这是一个简单的示例，说明了如何封装一个基础组件。在实际应用中，你可以进一步增加组件的功能，例如添加关闭按钮、动画效果等，以使其更加通用和灵活。