在 Ng-Zorro 官方的文档里面，你可以找到它提供的各种组件的用法。打开 Form 这个组件的文档，在组件的文档里面都会有提供一些模板代码，可以快速创建需要的界面。

比如我需要在应用里使用这个登录界面，按一下它下面这个复制生成代码的命令，回到项目，在终端，项目所在目录的下面，可以执行一下刚才复制的命令。

这个命令就是 ng generate ，生成的是 ng-zorro-antd 里的模板，form-normal-login 是要生成的模板，把这个 name 换成一个组件的名字。组件放在 pages/demo 里面，名字叫 login。

回到项目，找到刚才生成的组件，pages，demo，login，可以先看一下这个组件的模板文件，login.component.html ，在这个模板文件里使用了 Ant Design 里提供的组件创建了一个用户登录界面。

你会发现有些地方会有错误，这是因为在这个组件的模板里需要导入需要的东西。这个 login 组件在 DemoModule 模块里声明了一下，打开这个模块，在模块的 declarations 里面，会有 LoginComponent ，这是命令自动添加进来的。

这个组件里面还需要 AntDesign 里的一些组件，可以在 imports 里面，导入 NgZorroAntdModule 这个模块，这个模块来自 ng-zorro-antd 。

另外组件里还需要 Angular 里面的 ReactiveFormsModule 模块，也把它放在模块的 imports 里面，这个模块来自 @angular/forms 。保存一下模块文件，再回到 LoginComponent 组件的模板文件，可以再保存一下，你会发现之前的错误提示就不见了。

路由

下面给这个组件添加一条路由，打开 DemoModule 模块的路由模块，在这个模块里，添加一条路由，路由的 path 是 login，路由对应的 component 可以用一下 LoginComponent 这个组件。

模板

然后再打开 AppComponent 组件的模板文件，在边栏上的 Demo 菜单下面添加一个新的菜单项目，复制一份，文字是 Login，地址是 /demo/login。

预览

回到浏览器可以再预览一下，点击边栏菜单上的 Login ，打开的是 demo/login 。界面上显示的就是 LoginComponent 组件的视图内容，这里就是一个登录用户的表单。

现在打开这个 Login 的时候，Demo 下的这个 basic 也会是激活状态，因为当前打开的地址里在包含 demo 这个前缀，可以修改一下，在 Demo 下面的 Basic 这个菜单项目上面，把这个 nzMatchRouter 换成 nzMatchRouterExact。

现在打开 demo/login 这个页面的时候，只有 Login 这个菜单项是激活的状态。