通过介绍两种方式来实现动态加载 Tab 标签的效果。

1. 方式一:利用 Angular 动态加载组件实现

效果图:

Angular 实现动态加载 Tab 标签_Angular

原理:

Angular 中动态加载组件的两种方式:

加载已经声明的组件: 使用 ComponentFactoryResolver,将一个组件实例呈现到另一个组件视图上;

动态创建组件并加载:使用 ComponentFactory和Compiler,创建和呈现组件。

要想实现图中效果,用 ComponentFactoryResolver 即可实现。

用 ComponentFactoryResolver 实现的一些概念:

ViewChild:属性装饰器,通过它可以获得视图上对应的元素;

ViewContainerRef:视图容器,可在其上创建、删除组件;

ComponentFactoryResolver:组件解析器,可以将一个组件呈现在另一个组件的视图上。

代码下载:


2. 方式二:利用 Angular 路由实现

效果图:

Angular 实现动态加载 Tab 标签_动态加载_02

原理:

当点击 `Add` 时,往 routerLinks 数组里添加一条路由数据;当点击某个 Tab 时,切换到该 Tab 的路由。