Question

在我生命中，我无法弄清楚如何在页面加载时加载我的组件之一。

这就是我得到的：

activity.page.ts：

export class ActivityPage implements OnInit {

  page = "friends"; // page is the ngModel name

  friends: Friends[];
  selectedFriends: Friends;  

  nearme: Nearme[];
  selectedNearme: Nearme;

  constructor(private friendService: FriendsService, private nearmeService: 
   NearmeService) { 
  }

  ngOnInit() {
    this.friends = this.friendService.getFriends();
    this.nearme = this.nearmeService.getNearme();
    console.log(this.friends);
  }

  selectFriends(friends: Friends): void {
    this.selectedFriends = friends;
    this.selectedNearme = null;
    console.log(friends);
  }

  selectNearme(nearme: Nearme): void {
    this.selectedNearme = nearme;
    this.selectedFriends = null;
  }

  segmentChanged(ev: any) {
    console.log('Segment changed', ev);
  }

}

activity.page.html：

<ion-segment-button class="tab-label" value="friends" (click)="selectFriends(friends)" margin-start>
    Friends
</ion-segment-button>
<ion-segment-button class="tab-label" value="near_me" (click)="selectNearme(nearme)">
    Near Me
</ion-segment-button>
<app-friends *ngIf="selectedFriends" [friends]="selectedFriends"></app-friends>
<app-nearme *ngIf="selectedNearme" [nearme]="selectedNearme"></app-nearme>

friends.service.ts：

@Injectable()
export class FriendsService {
  private friends: Friends[] = [];

  constructor(
    private backend: BackendService,
    private logger: Logger
  ) { }

  getFriends() {
    this.backend.getAll(Friends).then( (friends: Friends[]) => {
      this.logger.log(`Fetched ${friends.length} friends.`);
      this.friends.push(...friends); // fill cache
    });
    return this.friends;
  }
}

backend.service.ts：

@Injectable()
export class BackendService {
  constructor(private logger: Logger) {}

  getAll(type: Type<any>): PromiseLike<any[]> {
    if (type === Friends) {
      // TODO: get from the database
      return Promise.resolve<Friends[]>(FRIENDS);
    }
    if (type === Nearme) {
      // TODO: get from the database
      return Promise.resolve<Nearme[]>(NEARME);
    }
    let err = new Error('Cannot get object of this type');
    this.logger.error(err);
    throw err;
  }
}

页面加载时，内容为空。我需要单击细分按钮以加载组件HTML。我希望app-friends组件在页面加载时显示。

我不确定自己在做什么错。

我尝试了以下答案，但它们不能100％起作用。

有人可以帮我解决这个问题吗？

Answer 1

我没有发现您的ngOnInit上有任何问题-您只是根据条件隐藏了组件-尝试为selectedFriends或selectedNearMe赋值，因为两者都是{{ 1}}或null（页面加载时

因此，当您触发单击时，其中任何一个都会有价值，您就可以看到您的组件

undefined

上面的代码将显示您的ngOnInit() { this.friends = this.friendService.getFriends(); this.nearme = this.nearmeService.getNearme(); this.selectedFriends = this.friends; }-如果没有任何效果，请尝试使用组件上的app-friends属性显示/隐藏

希望这会有所帮助-编码愉快：）

Answer 2

您的问题不在ngOnInit中，取决于ngIf的条件。

当selectedFriends不为null时，您显示的是app-friend，而selectedNearme不为null时，则显示的app-earme。

我认为最好的选择是像这样将ngIf条件更改为page ===“ friends”和page ===“ near_me”：

<app-friends *ngIf="page === 'friends'" [friends]="selectedFriends"></app-friends>
<app-nearme *ngIf="page === 'near_me'" [nearme]="selectedNearme"></app-nearme>

其他选择是使用文档https://ionicframework.com/docs/components/#segment

之类的工具。

我也不确定绑定到按钮（单击）事件的函数上的代码是否正确，但是这里可能缺少一些代码，因为这不是问题的一部分：）

确保在app-friend中需要您有一个selectedFriends，因为通过更改，我建议应在开始时加载app-friend;）

编辑：添加开关示例：

<ion-segment [(ngModel)]="page">
  <ion-segment-button class="tab-label" value="friends" (click)="selectFriends(friends)" margin-start>
    Friends
  </ion-segment-button>
  <ion-segment-button class="tab-label" value="near_me" (click)="selectNearme(nearme)">
    Near Me
  </ion-segment-button>
</ion-segment>

<div [ngSwitch]="page">
    <app-friends *ngSwitchCase="'friends'" [friends]="selectedFriends"></app-friends>
    <app-nearme *ngSwitchCase="'near_me'" [nearme]="selectedNearme"></app-nearme>
</div>

Angular-使用ngOnInit加载组件

2 个答案: