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

首先：对不起，我的英语不好，它不是我的母语

我的问题是：我有一个home.ts和一个child组件newslider.ts。当在my 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>

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

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

@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 => {

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

newslider.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>

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

{{item.date*1000}date:'dd.MM.yyyy HH:MM'}Uhr
{{item.title}
{{item.formattedbodyHTML | striphtml | slice:0:120}}



顶部


{{site.title}

newsslider.ts中的console.log表示，this.data从true更改为false再更改为true，这是完全正确的。但在前端视图中，我看不到它

作为一种解决方法，我创建了一个触发函数的事件，但我不认为这是正确的方法

我希望你们能帮我。请随意提问

---

感谢您可以在子组件上使用@Input，从父组件传递数据值。将父组件上的初始值设置为

false

，然后使用@Output to emmit events将父组件中的值设置为它需要的任何值

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

还有新闻记者

@Input() data

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

---

这里有更多关于输入和输出的信息

太好了，这很有效。非常感谢。只需对您的解决方案进行一个小的编辑。我必须在输入和输出时使用大括号，例如@input（）data@Trommelpeter很乐意帮忙！我已经更新了这个例子