在组件 Ionic 中重新加载数据

Question

我将 Ionic 和 Firestore 用于我的 Web 应用程序。在一个组件中，我显示了 firestore 数据库中的项目列表，url tabs/items/list-detail/ 中的项目的详细信息和其他用于修改图像的按钮，然后是一个按钮 return url tabs/items/。之后，如果我 return 到 tabs/items/list-detail 页面，我希望列表重新加载修改后的项目，但页面保持不变。

我试过使用 ViewWillEnter 但不起作用。

在项目的 html 页面中有一个导航到详细信息页面的按钮：

<ion-button id="detail" *ngIf="registeredAndUpl?.registered!=true" [routerLink]="['/tabs/items/list-detail',id]">View</ion-button>

这是组件列表详细页面：

export class DetailPage implements OnInit, ViewWillEnter {
    items: any
    userId: any
    item0: any
    item1: any

constructor(private route: ActivatedRoute, private router: Router,
    public authService: AuthenticationService,
) {}

   ngOnInit() {
  }

    ionViewWillEnter() {
        this.myDefaultMethodToFetchData();
    }

    myDefaultMethodToFetchData() {
        console.log("IN")
        this.getItems().then((data) => {
            console.log("IN2222")
            this.items = data
            this.item0 = this.items[0];
            this.item1 = this.items[1];

        })
        this.userId = this.authService.userData.uid;
    }

returnItems(){
    this.router.navigate(['/tabs/items/']);
    }

getItems() {
    const itemsRef = firebase.firestore().collection("user_orders/" + this.userId+"/reservations")
        .where("ordini", "<", 10).limit(5);
    return itemsRef.get()
        .then((querySnapshot) => {
            return querySnapshot.docs.map(doc => doc.data());

        })
        .catch((error) => {
            console.log("Error getting documents: ", error);
        });
}

然后，在 html 页面中，我有一个 return 项目的按钮：

  <ion-content>
        <div class="flexbox-container" style="display:flex;">
            <div *ngIf="item0" class="sidebar" style="flex:1;">
                <video id="video1" height="320" width="240" controls>
                    <source src="{{item0?.downloadURL}}" type="video/mp4">
                    <source src="{{item0?.downloadURL}}" type="video/ogg">
                </video>

            </div>
            <div *ngIf="item1" class="main" style="flex:1;">
                <video id="video2" height="320" width="240" controls>
                    <source src="{{item1?.downloadURL}}" type="video/mp4">
                    <source src="{{item1?.downloadURL}}" type="video/ogg">
                </video>

            </div>
        </div>
    </ion-content>
    <ion-button id="button1" (click)="returnItems()">Return</ion-button>

我做错了什么？

我注意到，每次我使用 ionViewWillEnter() 方法从项目切换到列表详细信息页面，并尝试在控制台中打印一些东西时，打印都会重新计算，但数据保持不变，所以问题我认为在 html 页：

Answer 1

ionViewWillEnter should work. Try ionViewDidEnter.

Answer 2

这个问题的答案可能迟到了，但我认为对未来的用户会有用。与 OP 问题相关，最有效的方法是使用 Events。这与 javascript.
中自定义事件的使用类似使用事件，您甚至可以在缓存 pages/components.

中执行或刷新所有内容

下面展示了如何订阅一个侦听器，然后从任何地方调用该事件，让该侦听器拦截您引发的事件。

按下后退按钮需要刷新的页面

page.ts

  constructor( 
    private events: Events
  ) {}
  
  ngOnInit() {
    this.events.subscribe('back_refresh', (data) => { /*Do your operations here as it's always called */ });
  }

存在后退按钮的页面

page.html

<ion-back-button (click)="this.goBack()"></ion-back-button>

page.ts

  constructor(
    private navController: NavController,
    private events: Events
  ) {}
  

  private goBack(): void{ 
    this.navController.pop();
    // also you can pass your data here
    this.events.publish('back_refresh', null); 
  }

在组件 Ionic 中重新加载数据

Reload data in a component Ionic

ionic-framework

google-cloud-firestore