将数据传递给 ionic 5 自定义元素标签答案

【问题标题】：passing data to ionic 5 custom element tag将数据传递给 ionic 5 自定义元素标签
【发布时间】：2020-12-28 08:49:01
【问题描述】：

我的 ionic 5 应用有一个侧边菜单和标签。每个页面的侧边菜单和选项卡可以有不同的内容。我不想在每个页面中复制 ion-menu，所以我创建了一个像这样的标题组件（我也为选项卡做了一个）：

标题组件：

<ion-menu contentId="content">
   <ion-header>
     <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
       <ion-title>{{pageObj.title}}</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content>
     <ion-list>
       <ion-menu-toggle auto-hide="false" *ngFor="let page of pageObj.pages">
         <ion-item [routerLink]="page.url" routerDirection="root" [class.active-item]="selectedPath.startWith(page.url)">
          <ion-icon>{{page.icon}}</ion-icon>
          <ion-label>
             {{page.title}}
           </ion-label>
         </ion-item>
       </ion-menu-toggle>

     </ion-list>
   </ion-content>
 </ion-menu>

现在我在 app.component.html 中使用这个头组件，如下所示：

<ion-app>
  <ion-split-pane>
  <app-header></app-header>
  <ion-router-outlet id="content"></ion-router-outlet>
</ion-split-pane>
</ion-app>

还有 app.component.ts：

...........
.........
export class AppComponent {
  pageObj: any = '';
  selectedPath = '';
  pages = [
    {
      title: 'Become a Member',
      url:   '/pages/membership'
    },
    {
     title: 'Make a Posts',
     url:   '/pages/posts'
   }
  
  ]


  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private router: Router
  ) {
       this.initializeApp();
       this.pageObj.title = 'Menu';
       this.pageObj.pages = this.pages;
       this.router.events.subscribe((event:RouterEvent) => {
       if (event && event.url) {
         this.selectedPath = event.url;
       }
     })
  }

.........
........

所以问题是需要 app.component.ts 中存在的变量（pageObg）。我不确定如何传递这些变量？我相信我可以这样做：

<app-header [pageObj]="pageObj"><app-header>

但我不确定这是如何工作的！有没有更好的方法来实现我想要做的事情？

【问题讨论】：

标签： html angular ionic-framework

【解决方案1】：

您走在正确的道路上，但这还不够。您需要在子组件的类中创建相应的@Input pageObj 属性。在你的情况下应该足够了。

这是关于组件交互的综合指南，请参考第一节“输入绑定”在此链接：https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

【讨论】：