Компонент по персонам. Компонент по персонам. angular person component

Компонент по персонам.

Open in new window

Компонент персон.

ng g component person

Создадим модуль.

ng g module person

Добавим компонент в модуль.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PersonComponent } from './person.component';

@NgModule({
  declarations: [PersonComponent],
  imports: [
    CommonModule
  ]
})
export class PersonModule { }

Добавим модуль персон в корневой модуль проекта.

import { PersonModule } from './person/person.module';
...

  imports: [
    ...
    PersonModule,

Добавим роутинг.

import { PersonComponent } from './person/person.component';

const routes: Routes = [
 ...
  { path: 'persons', component: PersonComponent },

Выведем ссылку на страницу компонента.

  <li class="nav-item active">
    <a class="nav-link" routerLink="/persons">Persons</a>
  </li>

Определим модель персоны в новом файле person/model.ts.

export class Person {
  id: number;
  rawName: string;
  firstnameRu: string;
  lastnameRu: string;
  surnameRu: string;
  firstnameKz: string;
  lastnameKz: string;
  surnameKz: string;
  firstnameLat: string;
  lastnameLat: string;
  surnameLat: string;
  role: string;
}

Создадим компонент для списка персон.

ng g component person/list

Изменим селектор.

@Component({
  selector: 'person-list',

Вставим компонент person-list в шаблон компонента person.

<p>
  person works!
</p>

<h1>Person list</h1>
<person-list></person-list>

person list angular

Выведем таблицу списка персон (person/list/list.component.html).

<table class="table table-striped table-sm table-bordered  table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Raw name</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Surname</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>

    <tr *ngFor="let person of persons">
      <td>{{ person.id  }}</td>
      <td>{{ person.rawName  }}</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
    </tr>

  </tbody>
</table>

Определим тестовые персоны в компоненте.

import { Component, OnInit } from '@angular/core';
import { Person } from '../model';


@Component({
  selector: 'person-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.sass']
})
export class ListComponent implements OnInit {

  persons: Person[];

  constructor() { }

  ngOnInit() {
    this.persons = [
      {
        id: 1,
        rawName: 'test',
        firstnameRu: 'test',
        lastnameRu: 'test',
        surnameRu: 'test',
        firstnameKz: 'test',
        lastnameKz: 'test',
        surnameKz: 'test',
        firstnameLat: 'test',
        lastnameLat: 'test',
        surnameLat: 'test',
        role: 'test'
      }
    ];
  }

}

person list angular

Создадим компонент формы.

ng g component person/form

Изменим селектор и добавим форму в главный шаблон.

selector: 'person-form',
...

<h1>Person form</h1>
<person-form></person-form>

Определим объект модели данных в компоненте формы.

import { Component, OnInit, Input } from '@angular/core';
import { Person } from '../model';

@Component({
  selector: 'person-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.sass']
})
export class FormComponent implements OnInit {

  @Input() person: Person;

  constructor() { }

  ngOnInit() {
  }

}

Обработаем клик на строке таблицы.

<tr *ngFor="let person of persons" (click)="onSelect(person)" class="table_row">
  <td>{{ person.id  }}</td>
  <td>{{ person.rawName  }}</td>
  <td>-</td>
  <td>-</td>
  <td>-</td>
  <td>-</td>
</tr>

Зададим поитер в css.

.table_row
  cursor: pointer;

Выделим текущую запись.

<tr  [ngClass]="{'table-danger': person.id==current}" ...

В компоненте сделаем индикатор.

export class ListComponent implements OnInit {

  current: number = 0;

  @Output() onSelected = new EventEmitter();
  onSelect(item: any){
    this.current = item.id;
    this.onSelected.emit(item);
  }    
...

Функция удаления записи.

delete(person: Person){
    if(confirm("Вы уверены?")) {
      return this.http.delete(API_URL+'api/persons/' + person.id + '/').subscribe((res: any) =>{
        this.getPersonList(this.offset);
      }, () => {
        alert('Error of deleting!');
      });
    }
}

Ссылка в шаблоне.

  <td> 
    <button type="button" class="close" (click)="delete(person)">
      <span aria-hidden="true">&times;</span>
    </button>
  </td>

В компоненте списка определим выходное событие (параметр декорируемый Otput-ом) которое передастся родительскому компоненту person.component.ts.

И опишем ф-цию клика, в которой инициируем событие, передавая в нем аргумент функции в приемник (родительский компонент).

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
...
export class ListComponent implements OnInit {

  @Output() onSelected = new EventEmitter();
  onSelect(item: any){
    this.onSelected.emit(item);
  }    
...

В шаблоне родительского компонента, при подключении дочернего опишем выходной параметр и укажем ф-цию (select), которая будет его принимать но уже в родительском компоненте.

<h1>Person form</h1>
<person-form [person]="item" ></person-form>
<h1>Person list</h1>
<person-list  (onSelected)="select($event)"></person-list>

Опишем эту функцию в которой присвоим значение локальной переменной, которая пойдет как Input но в соседний, дочерний компонент с формой.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.sass']
})
export class PersonComponent implements OnInit {

  item: any;
  constructor() { }

  ngOnInit() {
  }

  select(event: any){
    this.item = event;
  }

}

Импортируем библиотеку работы с формами в модуль person.module.ts.

import { FormsModule } from '@angular/forms';
...

@NgModule({
  declarations: [PersonComponent, ListComponent, FormComponent],
  imports: [
    CommonModule,
    FormsModule
  ]
})

Доработаем форму.

Выводим ее только в случае определенного объекта person.

И подвязываем поле ввода к модели.

<form *ngIf="person">
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Raw name</label>
    <div class="col-sm-10">
      <input [(ngModel)]="person.rawName" name="person_row_name" type="text" class="form-control">
    </div>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

{{ person | json  }}

Так же выведем весь объект person для отладки.

person form angular

Документация по реактивным формам Angular

Other topics