Question

我使用Angular2.RC5和angular-cli.webpack.8。

我有使用组件构建的项目列表和＆＃34; child＆＃34;组件。我想为子组件实现一些行为，以便在我单击其中的内容时更改类。但是当触发（单击）事件时，将重新创建子组件，并且所有更改都将浪费。这个子组件看起来像这样：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'red-key-list-folder',
  template: `
      <a (click)="isVisible = true">
       CLICK TO OPEN
      </a>
      <div [ngClass]="{'show': isVisible}">
       HIDDEN CONTENT
      </div>
  `
})
export class KeyListFolderComponent {

  @Input() somethingFromParentComponent: Object = {};

  isVisible: boolean = false;

  constructor() {
  }

}

我尝试添加

changeDetection: ChangeDetectionStrategy.OnPush

到组件元数据，但它也没有工作。

My Parent组件看起来更像是这样：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'list',
  template: `
      <div>
        <template ngFor let-key [ngForOf]="list">
          <red-key-list-folder [somethingFromParentComponent]="something">
          </red-key-list-folder>
        </template>
      </div>
  `
})
export class ListComponent {

  something: Object = {};

  list = [
    1, 2, 3
  ];

  constructor() {
  }

}

知道如何阻止该组件在此次点击事件中重新加载吗？

Angular2 RC5阻止子组件在调用（单击）时重新创建

0 个答案: