Дочерний компонент вызывается при загрузке приложения

Question

У меня есть компонент, называемый отменой, который я хочу вызвать, когда пользователь нажимает кнопку в компоненте имен.Я делаю это, устанавливая флаг loadCancellation в true, когда вызывается кнопка «Поиск».И затем в компоненте отмены я показываю только HTML, если для loadCancellation задано значение true.

Однако в инструментах разработчика компонент отмены вызывается первым при загрузке компонента имен, а также при нажатии кнопки «Поиск».

Как предотвратить вызов компонента отмены при загрузке компонента names?

Я попытался установить для флага loadCancellation значение false в конструкторе компонента names.Но компонент отмены все еще поднялся.

Я думаю, что это происходит, потому что я устанавливаю loadCancellation в качестве атрибута компонента, как показано ниже.

<app-cancellation [zipCode]="zipCodeVal" [lastName]="lastNameVal" [loadCancellation]="loadCancellation"></app-cancellation>

Вот код:

names.component.html

<form class="body">
  <mat-form-field>
    <textarea [(ngModel)]="zipCodeVal" matInput placeholder="ZipCode" name="zipCode"></textarea>
  </mat-form-field>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <mat-form-field>
    <textarea [(ngModel)]="lastNameVal" matInput placeholder="LastName" name="lastName"></textarea>
  </mat-form-field>
  &nbsp;&nbsp;
  <button mat-raised-button color="primary" (click)="onSearch()">Search</button>
</form>
<app-cancellation [zipCode]="zipCodeVal" [lastName]="lastNameVal" [loadCancellation]="loadCancellation"></app-cancellation>

names.component.ts

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

@Component({
  selector: 'app-names',
  templateUrl: './names.component.html',
  styleUrls: ['./names.component.css']
})
export class NamesComponent {
  private zipCode: string;
  private loadCancellation: boolean;

  constructor() {
    // this.loadCancellation = false;
  }
  onSearch() {
    this.loadCancellation = true;
    console.log("cancellation is: " + this.loadCancellation);
  }
}

cancellation.component.html

<div *ngIf="loadCancellation">
<p>
  ZipCode is: {{zipCode}} lastName is: {{lastName}}
</p>
</div>

cancellation.component.ts

import { Component, Input, AfterViewInit } from '@angular/core';
import { CustomerNameService } from '../customer-name.service';
import { CustomerName } from '../customer-name';

@Component({
  selector: 'app-cancellation',
  templateUrl: './cancellation.component.html',
  styleUrls: ['./cancellation.component.css']
})
export class CancellationComponent implements AfterViewInit {
  @Input('zipCode') zipCode: string;
  @Input('lastName') lastName: string;
  @Input('loadCancellation') 
  set loadCancellation(loadCancellation: boolean) {
    console.log("inside set cancellation");
    this.customerNameService
        .getCustomerNames(this.zipCode, this.lastName)
        .subscribe(data => {this.customerNames = data;})
  }
  customerNames: Array<CustomerName>

  constructor (private customerNameService: CustomerNameService) {

  }

  ngAfterViewInit() {
    // console.log(this.loadCancellation);


  }

}

Answer 1

Если селектор компонента существует в HTML-шаблоне, он будет создан. При создании входные значения будут переданы (true и false здесь просто значения) и будет запущен ngOnInit().

Если вы хотите, чтобы компонент отмены создавался только тогда, когда loadCancellation имеет значение true, тогда вы можете сделать что-то подобное.

<app-cancellation *ngIf="loadCancellation" [zipCode]="zipCodeVal" [lastName]="lastNameVal"></app-cancellation>

Удачи!