Angular 应用程序加载时调用子组件

我有一个名为cancellation的组件，当用户单击names组件中的按钮时，我想调用该组件。我通过在调用搜索按钮时将loadCancellation标志设置为true来实现这一点。然后在取消组件中，我只在loadCancellation设置为true时显示html

但是，在开发人员工具中，在加载名称组件时，以及在单击搜索按钮时，首先调用取消组件

如何防止在加载名称组件时调用取消组件

我尝试在names组件构造函数中将loadCancellation标志设置为false。但取消部分仍然被提出

我认为这是因为我将loadCancellation设置为组件的一个属性，如下所示

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

取消.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>

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

ZipCode是：{{ZipCode}}lastName是：{{lastName}

取消.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);
  }
}

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);


  }

}

从'@angular/core'导入{Component，Input，AfterViewInit}；
从“../customer name.service”导入{CustomerNameService}；
从“../customer name”导入{CustomerName}；
@组成部分({
选择器：“应用程序取消”，
templateUrl:'./cancellation.component.html'，
样式URL:['./cancellation.component.css']
})
导出类取消组件实现AfterViewInit{
@输入（'zipCode'）zipCode:string；
@输入（'lastName'）lastName:string；
@输入（'loadCancellation'）
设置loadCancellation（loadCancellation:布尔值）{
控制台日志（“内部设置取消”）；
这是客户服务
.getCustomerNames（this.zipCode，this.lastName）
.subscribe（数据=>{this.customerNames=data；}）
}
客户名称：数组
构造函数（专用customerNameService:customerNameService）{
}
ngAfterViewInit（）{
//console.log（this.loadCancellation）；
}
}

如果html模板中存在组件选择器，则将创建它。在创建时，输入值将被传递（这里的true和false只是值），并且将运行

ngonit（）

如果您只希望在

loadCancellation

为true时创建取消组件，则可以执行以下操作

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

---

祝你好运

在创建组件时，我没有意识到我可以像那样添加*ngIf。非常感谢。