Правильный ли метод onclick всегда вызывает метод ngOnInit? - PullRequest
Новая
       18

Правильный ли метод onclick всегда вызывает метод ngOnInit?

0 голосов
/ 28 марта 2020

У меня есть всплывающая страница html с Angular: 

<div class="example-container mat-elevation-z8">
  <div class="example-loading-shade"
       *ngIf="isLoadingResults">
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>
  <div class="button-row">
    <a mat-flat-button color="primary" [routerLink]="['/products']"><mat-icon>list</mat-icon></a>
  </div>
  <mat-card class="example-card">
    <mat-card-header>
      <mat-card-title><h2>{{product.prod_name}}</h2></mat-card-title>
      <mat-card-subtitle>{{product.prod_desc}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <dl>
        <dt>Product Price:</dt>
        <dd>{{product.prod_price}}</dd>
        <dt>Updated At:</dt>
        <dd>{{product.updated_at | date}}</dd>
      </dl>
    </mat-card-content>
    <mat-card-actions>
      <a mat-flat-button color="primary" (click)="editProduct()"><mat-icon>edit</mat-icon></a>
      <a mat-flat-button color="warn" (click)="deleteProduct(product.id)"><mat-icon>delete</mat-icon></a>
    </mat-card-actions>
  </mat-card>
</div>

и соответствующим классом компонента: 

import {Component, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ApiService} from '../api.service';
import {Product} from '../product';
import {ViewProductService} from '../view-product.service';
import {Subscription} from 'rxjs/internal/Subscription';

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

  product = {} as Product;
  product2 = {} as Product;
  subscription: Subscription;
  isLoadingResults = true;

  constructor(private route: ActivatedRoute, private api: ApiService, private router: Router, private viewProductService: ViewProductService) {
  }

  ngOnInit(): void {
    this.subscription = this.viewProductService.getCurrentProduct().subscribe(value => {
      this.product.id = String(value['_id']);
      this.product.prod_name = value.prod_name;
      this.product.prod_desc = value.prod_desc;
      this.product.prod_price = value.prod_price;
    });
    this.isLoadingResults = false;
    // this.getProductDetails(this.route.snapshot.params['id']);
  }

  getProductDetails(id) {
    this.api.getProduct(id)
      .subscribe(data => {
        this.product = data;
        this.product.id = id;
        console.log(this.product);
        this.isLoadingResults = false;
      });
  }

  editProduct() {
    this.viewProductService.viewProduct(this.product);
    this.router.navigate(['/product-edit']);
  }

  deleteProduct(id) {
    this.isLoadingResults = true;
    this.api.deleteProduct(id)
      .subscribe(res => {
          this.isLoadingResults = false;
          this.router.navigate(['/products']);
        }, (err) => {
          console.log(err);
          this.isLoadingResults = false;
        }
      );
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

}

Я новичок в Angular, и это Может быть, это будет новинка ie. Моя проблема в том, что когда вызывается событие onclick, метод ngOnInit всегда вызывается раньше, чем метод editProduct.

Это правильно? Это неожиданное поведение для меня. Мне не нужно снова вызывать метод ngOnInit, потому что он снова отображает страницу, и мне это не нужно.

Существует способ, которым ngOnInit не будет вызываться каждый раз, когда вызывается метод editProduct?

1 Ответ

0 голосов
/ 30 марта 2020

Я вижу, что вы переходите к компоненту Product Detail каждый раз, когда пользователь нажимает кнопку редактирования, верно? если это правильно, поведение ожидается, потому что OnInit является одним интерфейсом, среди других, которые включены в жизненный цикл компонентов angular. Вы можете увидеть больше здесь. https://dzone.com/articles/angular-6-part-3-life-cycle-of-a-component

Обратите внимание, что метод ngOnInit находится в компоненте Detail, а не в компоненте List, возможно, вы скопировали и вставили свой код, и вам не нужно вносить изменения в метод редактирования в компоненте по порядку. сохранить изменения элемента вместо того, чтобы снова направить его на тот же элемент.

...