Question

我一直在使用会议模板，并注意到侧面菜单在app.template.html的代码中非常复杂。作为一种更好的实践，我认为应该创建一个组件，并且正在努力为自己学习。虽然我可以创建组件，但我的数据没有通过。

我将PageInterface移动到一个接口类中，以便在不同的地方导出和导入。

export interface PageInterface {
    title: string;
    name: string;
    component: any;
    icon: string;
    logsOut?: boolean;
    index?: number;
    tabName?: string;
    tabComponent?: any;
}

我的组件side-menu-list.ts，它被称为console.log输出。

import { Component, Input } from '@angular/core';
import { PageInterface } from '../../interfaces/page-interface';

@Component({
    selector: 'side-menu-list',
    templateUrl: 'side-menu-list.html'
})
export class SideMenuListComponent {

    @Input() Heading: string = "Place Holder";
//    @Input() SideMenuItemList: PageInterface[];

    constructor() {
        console.log('Hello SideMenuListComponent Component');
    }
}

组件HTML：

<ion-list>
    <ion-list-header>Passed: {{Heading}}</ion-list-header>
<!-- 
    <button ion-item menuClose *ngFor="let SideMenuItem of SideMenuItemList" (click)="OpenPage(SideMenuItem)">
          <ion-icon item-start [name]="SideMenuItem.icon" [color]="IsActive(SideMenuItem)"></ion-icon>
          {{SideMenuItem.title}}
    </button> 
-->
</ion-list>

我暂时注释掉按钮，试图让Heading工作。

现在来自app.component.html

的电话

<side-menu-list [Heading]="Testing"></side-menu-list>

其他菜单选项仍在使用：

        <ion-list>
            <ion-list-header>Account</ion-list-header>
            <button ion-item menuClose *ngFor="let p of loggedOutPages" (click)="openPage(p)">
                <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
                {{p.title}}
            </button>
        </ion-list>

我希望将第二个参数传递给side-menu-list：

<side-menu-list [Heading]="Testing" MenuOptions=loggedOutPages></side-menu-list>

这是有效的。

将数据传递给离子3组件不起作用

0 个答案: