1. 前言 1.1. update on 5th/Apr/2023 根据 flex-layout 官方宣告, @angular/flex-layout 当前处于 deprecated 状态. 替代方案为 Tailwindcss 或者 Angular CDK.
具体原因参考官方的 anoucement - Medium post 和 github 上的讨论
建议新项目使用其他 css library, 旧项目考虑移植到其他 css library.
迁移工具:
migrate-angular-flex-to-tailwind
[flex-layout-migrator](https ://github.com/NIPE-Solutions/flex-layout-migrator)
1.2. update on 25th/June/2023 目前 DuncanFaulkner 克隆了@angular/flex-layout 并提供社区支持, 目前以及能支持 Angular 16 了.
所以使用社区版本的 flex-layout 也是一直选择, 如果重度依赖 flex-layout
新家现在位于
@ngbracket/ngx-layout 。
2. 安装 要在 Angular CLI 项目中使用@angular/flex-layout 相当简单,只需要两个步骤:
安装组件指令
1 npm install @angular/flex-layout --save
将 Angular Flex Layout 导入到 app.module 中
1 2 3 4 5 6 7 8 9 import {NgModule } from '@angular/core' ;import {FlexLayoutModule } from '@angular/flex-layout' ;@NgModule ({imports : [FlexLayoutModule ],... }) export class AppModule {}