子组件中的按钮没有显示

Question

如下所示，我有一个名为Treatment-as-tiff的组件，在它的html文件中应该有一个按钮。该按钮应该是可见的，当特定的行动发生在site-map-component.问题是当我运行代码并设置该动作发生按钮不显示

请让我知道我在这里错过了什么

TreatmentAsTIFF html:

<button  *ngIf="iTreatmentAsTIFFVisibilityPasser.visibilityState" 
title="Get Treatment As TIFF" 
class="btn btn-sm btn-icon" 
(click)="getTreatmentAsTIFF()">
{{ "SITE.GET_TREATMENT_AS_TIFF" | translate }}
<ng-content></ng-content>
</button>

TreatmentAsTIFF.ts:

import { ThrowStmt } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { SYNOPSServicesProviderService} from '../services/SYNOPSServiceProvider/synopsservices-provider.service'
import { Subscription } from 'rxjs';

export interface ITreatmentAsTIFFVisibilityPasser {
visibilityState: boolean
}
@Component({
selector: 'app-treatment-as-tiff',
templateUrl: './treatment-as-tiff.component.html',
styleUrls: ['./treatment-as-tiff.component.css']
})
export class TreatmentAsTIFFComponent implements OnInit {
iTreatmentAsTIFFVisibilityPasser:ITreatmentAsTIFFVisibilityPasser;
subscriptionEvtEmitterOnTratmentAsTIFFEmitted: Subscription;
constructor(private synopsServicesProvider:SYNOPSServicesProviderService) { 
this.iTreatmentAsTIFFVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
this.iTreatmentAsTIFFVisibilityPasser.visibilityState = false
}
ngOnInit(): void { 
this.subscriptionEvtEmitterOnTratmentAsTIFFEmitted = this.synopsServicesProvider.getEventEmitterResponseFoRiskCalculation().subscribe((response: object)=> {
console.log("OnTratmentAsTIFF response received: ",response)
});
}
public getVisibilityState() {
return this.iTreatmentAsTIFFVisibilityPasser.visibilityState;
}
public setInvisible() {
this.iTreatmentAsTIFFVisibilityPasser.visibilityState = false
}
public setVisible() {
this.iTreatmentAsTIFFVisibilityPasser.visibilityState = true
}

private getTreatmentAsTIFF(fieldGeometry):void{
this.synopsServicesProvider.startWebServiceForGetTreatmentAsTIFF(fieldGeometry);
}
}

site-map-component:

import { TreatmentAsTIFFComponent } from '../treatment-as-tiff/treatment-as-tiff.component';
export interface ITreatmentAsTIFFVisibilityPasser {
visibilityState: boolean
}
iTreatmentAsTIFFButtonVisibilityPasser:ITreatmentAsTIFFVisibilityPasser;
treatmentAsTIFFComponent: TreatmentAsTIFFComponent;
constructor() {
this.iTreatmentAsTIFFButtonVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
this.iTreatmentAsTIFFButtonVisibilityPasser.visibilityState = false
}
...
...
...
private toggleGetTreatmentAsTIFFButtonToVisible():void{
this.treatmentAsTIFFComponent.setVisible()
}
private toggleGetTreatmentAsTIFFButtonToInvisible():void{
this.treatmentAsTIFFComponent.setInvisible()
}

site-map-component.html:

<app-treatment-as-tiff></app-treatment-as-tiff>

Answer 1

这是因为您将TreatmentAsTIFFComponent中的iTreatmentAsTIFFVisibilityPasser的visibilityState设置为false。如果你想显示它，请将其设置为true:

export class TreatmentAsTIFFComponent implements OnInit {
...
constructor(private synopsServicesProvider:SYNOPSServicesProviderService) { 
this.iTreatmentAsTIFFVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
this.iTreatmentAsTIFFVisibilityPasser.visibilityState = true; // <-- HERE!
}
...
}

或者你没有在SiteMapComponent中调用toggleGetTreatmentAsTIFFButtonToVisible函数。我确信你对SiteMapComponent内TreatmentAsTIFFComponent的子元素的引用不起作用。

下面是如何在SiteMapComponent中获得TreatmentAsTIFFComponent的引用:

import {
...
ViewChild,
...
} from '@angular/core';
...
@Component({
...
})
export class SiteMapComponent implements OnInit {
@ViewChild(TreatmentAsTIFFComponent) treatmentAsTIFFComponent: TreatmentAsTIFFComponent;
...
private toggleGetTreatmentAsTIFFButtonToVisible():void{
this.treatmentAsTIFFComponent.setVisible()
}
private toggleGetTreatmentAsTIFFButtonToInvisible():void{
this.treatmentAsTIFFComponent.setInvisible()
}
}

Answer 2

要从父组件中调用子组件中的方法，可以使用@ViewChild装饰器，

@ViewChild被用来注入对TreatmentAsTIFFComponent的引用，以便SiteMapComponent可以在其模板中使用它，以便调用后者的公共方法。

• 在你的site-map.component.ts文件中

import { ViewChild } from '@angular/core';
import { TreatmentAsTIFFComponent } from '../treatment-as-tiff/treatment-as-tiff.component';
export interface ITreatmentAsTIFFVisibilityPasser {
visibilityState: boolean
}
iTreatmentAsTIFFButtonVisibilityPasser: ITreatmentAsTIFFVisibilityPasser;
constructor() {
this.iTreatmentAsTIFFButtonVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
this.iTreatmentAsTIFFButtonVisibilityPasser.visibilityState = false
}
export class SiteMapComponent implements OnInit {
@ViewChild(TreatmentAsTIFFComponent) treatmentAsTIFFComponent: TreatmentAsTIFFComponent;
ngOnInit() {
}
toggleGetTreatmentAsTIFFButtonToVisible(): void {
this.treatmentAsTIFFComponent.setVisible()
}
}

注意:SiteMapComponent中对treatmentAsTIFFComponent的引用只有在父组件的视图完全初始化后才可用。