将值传递给组件以切换 *ngIf

Question

首先：抱歉我的英语不好，它不是我的母语。

关于我的问题：我有一个 home.ts 和一个子组件 newsslider.ts。当在我的 newsslider 中调用一个函数时，我通过 ngif 隐藏了该块，并且当调用完成时它再次可见。

但是，如果我从家里调用该函数，刷新效果很好，但不会隐藏。

这是我的代码： Home.html

 <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
            pullingIcon="chevron-down-circle-outline"
            color="primary"
            pullingText="Ziehen zum Neuladen"
            refreshingSpinner="circles"
            refreshingText="Aktualisiere Daten">

    </ion-refresher-content>
</ion-refresher>

Home.ts

 @Component({
    selector: 'app-home',
    templateUrl: './home.page.html',
    styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit, DoCheck {

    constructor(
        public newsslider: NewssliderComponent
    ) {
    }



    doRefresh(event) {
        this.newsslider.getApiNews().then((data:any) => {

        })

        setTimeout(() => {
            event.target.complete();
        }, 2000);
    }

Newsslider.ts

@Component({
    selector: 'app-newsslider',
    templateUrl: './newsslider.component.html',
    styleUrls: ['./newsslider.component.scss'],
})
export class NewssliderComponent implements OnInit {
    public data:boolean = false;
    public sliderItems:any;
    public locations:any;

 

    constructor(
        public router: Router,
        public HttpService: HttpService,
        public locationpage: LocationPage,
        public ngZone: NgZone,
        public events: EventsService,
    ) {
    }

 

    getApiNews() {
        return new Promise(resolve => {
            this.data = false;
            this.ngZone.run(() => {
                console.log("executed");
                this.data = false;
                this.FavoriteLocationIdToString().then((string:string) => {
                    let baseApi = 'XXXXX';
                    let ApiCall = baseApi.concat(string);
                    this.HttpService.get(ApiCall).then((data: any) => {
                        this.sliderItems = JSON.parse(data.data)
                        this.data = true;
                        resolve(this.sliderItems);
                    }, error => {

                    });
                });
            });
        })
    }

newsslider.html

<div *ngIf="data" class="aktuell__content">

            <ion-slides class="aktuell-slider" pager="true"
                        [options]="slideOpts">
                <ion-slide *ngFor="let item of sliderItems; let i = index">
                    <div class="aktuell-slider__item">
                        <span>{{item.date * 1000 | date:'dd.MM.yyyy HH:mm'}} Uhr</span>

                        <h3>{{item.title}}</h3>

                        <p>{{item.formatedBodyHtml | striphtml | slice:0:120}}...</p>

                        <a [routerLink]="['/browser', item.detailPageUrl]"
                           href="#" class="more">
                            weiterlesen
                        </a>

                        <ul class="btn-list">
                            <li *ngIf="item.topNews == 1" class="btn-list__item btn-list__item--highlighted">
                                <span>top</span>
                            </li>
                            <ng-container *ngIf="item.sites.length <= 3">
                                <li *ngFor="let site of item.sites" class="btn-list__item">

                                    <span>{{site.title}}</span>

                                </li>
                            </ng-container>
                

    </ul>


                </div>
            </ion-slide>
        </ion-slides>


    </div>
    <div *ngIf="!data" class="aktuell__content">
        <div class="ion-padding custom-skeleton">
            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
            <ion-skeleton-text animated></ion-skeleton-text>
            <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
            <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </div>
    </div>

newsslider.ts中的console.log表示，this.data由true变为false变为true，完全没问题。但是在前端视图中我看不到它。

作为变通方法，我创建了一个触发该功能的事件，但我认为这不是正确的方法。

希望大家能帮帮我。欢迎提问。

谢谢

Answer 1

您可以在子组件上使用@Input，从父组件传递数据值。将父组件上的初始值设置为false，然后使用@Output 发出事件以将父组件中的值设置为它需要的任何值。

<parent-component>
  <child-component [data]="data" (dataChanged)="changeData($event)"></child-component>
</parent-component>

您的家将定义

data = false;

changeData(event){
  this.data = event
}

和新闻滑块

@Input() data

@Output() dataChanged = new EventEmmiter<boolean>()

而当你想改变父组件中数据的值时

this.dataChanged.emit(true)
or
this.dataChanged.emit(false)

这里是关于输入和输出的更多信息https://angular.io/guide/inputs-outputs

将值传递给组件以切换 *ngIf

Pass value to component to toggle *ngIf

angular

typescript

ionic-framework

ionic5