angular登陆界面

1.创建文件、模块和组件

创建文件 ng new XXXXX

移动到该文件目录下 cd XXXXX

npm install ng-zorro-antd --save（安装UI库）

ng add ng-zorro-antd（把UI添加到项目）

2.主页面转移模块

原来html，less文件注掉，将新的html，less文件转移到welcome里

如果html报错就注册一下，其实看着报错的是哪个标签，或者是不是前面的标签报错，去百度搜一下，一般在NG-ZORRO里都有

import { NgModule , CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from ‘@angular/core’;

import { WelcomeRoutingModule } from ‘./welcome-routing.module’;

import { WelcomeComponent } from ‘./welcome.component’;

import { NzTableModule } from ‘ng-zorro-antd/table’;

import { NzDividerModule } from ‘ng-zorro-antd/divider’;

import { NzLayoutModule } from ‘ng-zorro-antd/layout’;

import { FormsModule ,ReactiveFormsModule} from ‘@angular/forms’;

import { NzMenuModule } from ‘ng-zorro-antd/menu’;

import { NzIconModule } from ‘ng-zorro-antd/icon’;

import { NzFormModule } from ‘ng-zorro-antd/form’;

import { NzAlertModule } from ‘ng-zorro-antd/alert’;

import { HelloComponent } from ‘…/hello/hello.component’;

再import一下

@NgModule({

imports: [

WelcomeRoutingModule,

NzTableModule,

NzDividerModule,

NzLayoutModule,

FormsModule,

NzMenuModule,

NzIconModule,

NzFormModule,

NzAlertModule,

ReactiveFormsModule,

],

3.再写登陆界面

创建文件ng generate component pages/自己的组件名 --module app

1.html

<div class="login-container">
    <div class="login-header">
        <h1>试验用小程序</h1>
    </div>
    <form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
        <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
        <nz-form-item>
            <nz-form-control [nzErrorTip]="'请输入管理员账号'">
              <nz-input-group nzSize="large" nzPrefixIcon="user">
                <input nz-input formControlName="userName" placeholder="账户名" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control nzErrorTip="'请输入密码'">
              <nz-input-group nzSize="large" nzPrefixIcon="lock">
                <input nz-input type="password" formControlName="password" placeholder="密码" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <button nz-button type="submit" nzType="primary" nzSize="large" nzBlock>
              登录
            </button>
          </nz-form-item>
    </form>
</div>

2.less

.login-container {
    margin-top: 20vh;
  }
:host {
    display: block;
    width: 20rem;
    margin: 0 auto;

    ::ng-deep{
        .icon {
            margin-left: 16px;
            color: rgba(0, 0, 0, 0.2);
            font-size: 24px;
            vertical-align: middle;
            cursor: pointer;
            transition: color 0.3s;
        }
    }
  }  

3.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {
  form: FormGroup;
  error = '';
  type = 0;

  count = 0;
  constructor(
    fb: FormBuilder,
    private router:Router
    ) { 
    this.form = fb.group({
      userName: [null, [Validators.required, Validators.minLength(4)]],
      password: [null, Validators.required],
    });
  }


  ngOnInit(): void {
  }
  submit(){
    this.router.navigateByUrl("welcome/hello");
  }
}

4.接着配置路径

{ path: ‘login’ , component:LoginComponent}

5.在modules里宣布一下，这是我的，之后login里所有的import注册都在app的modules里

@NgModule({

declarations: [

AppComponent,

LoginComponent,

],

4.嵌入welcome的表格界面

创建文件 ng generate component pages/自己的组件名 --module pages/welcome

1.html

<nz-table #basicTable [nzData]="listOfData">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>{{ data.name }}</td>
        <td>{{ data.age }}</td>
        <td>{{ data.address }}</td>
        <td>
          <a>Action 一 {{ data.name }}</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a>Delete</a>
        </td>
      </tr>
    </tbody>
  </nz-table>

2.ts

interface Person {
  key: string;
  name: string;
  age: number;
  address: string;
}

 public itemList: any[] = [];

  ngOnInit() {
   
  }
  listOfData: Person[] = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park'
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park'
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park'
    }
  ];

3.配置路径

注意要import一下，前面忘记说了自己import

const routes: Routes = [
  { path: '', component: WelcomeComponent ,
  children: [{ path: 'hello', component: HelloComponent } ]},
];