通过介绍两种方式来实现动态加载 Tab 标签的效果。
1. 方式一:利用 Angular 动态加载组件实现
效果图:
原理:
Angular 中动态加载组件的两种方式:
加载已经声明的组件: 使用 ComponentFactoryResolver,将一个组件实例呈现到另一个组件视图上;
动态创建组件并加载:使用 ComponentFactory和Compiler,创建和呈现组件。
要想实现图中效果,用 ComponentFactoryResolver 即可实现。
用 ComponentFactoryResolver 实现的一些概念:
ViewChild:属性装饰器,通过它可以获得视图上对应的元素;
ViewContainerRef:视图容器,可在其上创建、删除组件;
ComponentFactoryResolver:组件解析器,可以将一个组件呈现在另一个组件的视图上。
代码下载:
2. 方式二:利用 Angular 路由实现
效果图:
原理:
当点击 `Add` 时,往 routerLinks 数组里添加一条路由数据;当点击某个 Tab 时,切换到该 Tab 的路由。