Question

我正在使用Angular 2和Ionic 2来构建应用。目前，我正在构建一个动态的侧面菜单。 Ionic提供了一个名为menuClose的指令，表示单击按钮将关闭侧边菜单。

我需要有条不紊地将该指令添加到我的侧边菜单中的一些但不是所有按钮，所以我决定使用[attr.menuClose]="..."构造。

这很好但在我的应用中，我没有收到指令menuClose，而是获得menuclose（注意大写）。

我能否以某种方式让Angular 2尊重我选择的大写字母？

我的模板

<button [attr.menuClose]="''" ion-item *ngFor="let item of this.root" (click)="openItem(item)">
  {{item.text}}
</button>

我得到的结果：

<button class="item-block item item-ios" ion-item="" tappable="" menuclose="">

Answer 1

使用[attr.some-attribute]用于有条件地设置src或href或name或id等实际html元素，但不用于绑定属性指令。

相反，您需要执行以下操作：

您可以这样做：

<button *ngIf="someCondition" menuClose ion-item *ngFor="let item of this.root" (click)="openItem(item)">
  {{item.text}}
</button>
<button *ngIf="!someCondition" ion-item *ngFor="let item of this.root" (click)="openItem(item)">
  {{item.text}}
</button>

由于您有代码重复，这并不理想。

更好的选择是查看menuClose如何工作，并将其扩展到条件除外。

<强>更新

menuClose的来源位于：https://github.com/driftyco/ionic/blob/dbfc183cac036099603f9e51611bfccbc900a08b/src/components/menu/menu-close.ts

您可以创建一个执行此操作的简单指令，并使用布尔谓词来启用或禁用该行为。

@Directive({
  selector: '[myMenuClose]'
})
export class MyMenuClose {

  @Input() myMenuClose: boolean;

  constructor(private _menu: MenuController) {}

  @HostListener('click')
  close() {
    if (this.myMenuClose) {
      const menu = this._menu.get();
      menu && menu.close();
    }
  }
}

此指令与menuClose的行为略有不同。您将布尔条件传递给它以启用或禁用它。

<button [myMenuClose]="someCondition" ion-item *ngFor="let item of this.root" (click)="openItem(item)">
  {{item.text}}
</button>

angular的动态属性指令中的大写

1 个答案: