添加离子成分

Posted 2023-03-13

【中文标题】添加离子成分

【英文标题】：Adding Ionic Components

【发布时间】：2017-11-25 11:14:50

【问题描述】：

我正在尝试在我的应用程序中启用默认分段。我提到了其他线程和问题，解决方案似乎正在对组件文件夹中存在的段 js 进行一些更改。

但我在组件文件夹中没有任何段文件。我只是在 html 页面中输入代码来添加组件。

我做错了吗？或者有什么方法可以添加？

感谢您的帮助。

编辑 1：

<div>
  <ion-segment [(ngModel)]="testing">
    <ion-segment-button value="book">book</ion-segment-button>
    <ion-segment-button value="table">table</ion-segment-button>
  </ion-segment>
</div>
  <div [ngSwitch]="testing" >
    <ion-list *ngSwitchWhen="'book'" ngSelected="selected">
      <a ion-item>
        <ion-label>book list</ion-label>
      </a>
   </ion-list>
<ion-list *ngSwitchWhen="'table'">
      <a ion-item>
        <ion-label>table list</ion-label>
      </a>
   </ion-list>
</div>

【问题讨论】：

能否将代码中最相关的部分添加到问题中？

你能像@sebaferreras 说的那样添加一些代码来帮助你吗？

编辑 1 中添加的代码。

你能在哪里解决这个问题？

【参考方案1】：

如果您想默认选择第一个选项卡，您可以在声明时将段的值分配给testing 属性：

@Component(
    selector: 'page-home',
    templateUrl: 'home.html'
)
export class HomePage 

  public testing = 'book';

  // ...

然后在视图中：

<div>
  <ion-segment [(ngModel)]="testing">
    <ion-segment-button value="book">book</ion-segment-button>
    <ion-segment-button value="table">table</ion-segment-button>
  </ion-segment>
</div>
  <div [ngSwitch]="testing" >
    <ion-list *ngSwitchWhen="'book'"> <!-- I've removed the ngSelected-->
      <a ion-item>
        <ion-label>book list</ion-label>
      </a>
   </ion-list>
<ion-list *ngSwitchWhen="'table'">
      <a ion-item>
        <ion-label>table list</ion-label>
      </a>
   </ion-list>
</div>

解释很简单。 <ion-segment [(ngModel)]="testing"> 将段组件绑定到testing 属性，<div [ngSwitch]="testing" > 将检查testing 属性的值以查看应该显示的列表：

<ion-list *ngSwitchWhen="'book'">...</ion-list> 或 <ion-list *ngSwitchWhen="'table'">...</ion-list>

因此，通过将 'book' 值分配给组件中的 testing 属性，您将默认选择第一个段。

如果您想更改选定的选项卡（以编程方式），您只需执行 this.testing = 'table'; 即可选择第二段。