继续上次的内容,上次的内容为angular整合ng-zorro、左边导航栏。 首先新建一个组件,下面代码会在src/app/pages路径下新建一个menus的组件
ng
新建完组件后删除menus.component.spec.ts文件,这一下文件目录如下图所示:
![beb2c9a7b4f0fc6d3bb01204211ec2dc.png](https://i-blog.csdnimg.cn/blog_migrate/5f7aa5a162c9ff621ab524ce1e09615a.jpeg)
比较重要的文件我都框起来了,app-routing.module.ts就是路由文件,修改变量routes为:
const
其实就是加入了menus的路径而已,这样一来就跟上一讲中menuList中的routerLink的值menus对应上了,接下来只要把menus.component.html中的代码改为menus work 运行项目就可以看到效果了。 接下来要做的是在welcome.component.html引入ng-zorro表格组件。首先给出官网的链接: https://ng.ant.design/components/table/zh 使用的方法很简单就是引入下列代码
import
注意下这段代码需要在你使用的component中引入,也就是说你在app.module.ts中引用是没用的,需要在welcome.module.ts中引入,修改后代码如下
import
然后根据官网的代码,修改welcome.component.html
<
然后修改welcome.component.ts
import
这就达到了下面的效果
![8e7b7a2682eb7c061e0eebee770c3fad.png](https://i-blog.csdnimg.cn/blog_migrate/f841881e7bd520e4e19c0157c95334c8.jpeg)