Angular 2：自定义组件的问题

Question

我目前正在尝试让一个自定义组件在使用 ES6/ES7 编写并使用 Babel 转译的 Angular 2 中工作。

当我加载页面时，我得到了包含所有适当数据的组件手风琴，但是所有面板都关闭并且单击什么也不做。我正在模仿我的手风琴TypeScriptPlunker。此外，AppComponent 中的 removeDynamic() 函数会在您单击按钮时切换，但视图不会更新以显示数据的更改。在昨天和今天的大部分时间都在修补它之后，我不知所措。任何见解将不胜感激！

我的AppComponent 已定义为这样，并带有适当的模板：

import {Component, View} from 'angular2/core'; // Import Component and View constructor (for metadata)
import {HTTP_PROVIDERS} from 'angular2/http'; // We're using http in our

import {Accordion, AccordionGroup} from '../components/accordion/accordion.component';

// Import NgFor directive
import {NgFor} from 'angular2/common';

// Annotate AppComponent class with `Component`
@Component({
  selector: 'my-app',

  // Let Angular know about `Http`
  providers: [HTTP_PROVIDERS]
})


// Define the view of our `Component` using one or more
// `View` annotations
@View({

  // Link to our external template file
  templateUrl: './components/app.html',

  // Specify which directives our `Component` will utilize with
  // the `directive` property of the `View` annotation
  directives: [Accordion, AccordionGroup, NgFor]
})

export class AppComponent {
  constructor() {

    // Debug
    console.log('AppComponent constructor() go');

    this.isOpen = false;

    this.groups = [
      {
        heading: 'Dynamic 1',
        content: 'I am dynamic!'
      },
      {
        heading: 'Dynamic 2',
        content: 'I am dynamic as well'
      }
    ];
  }

  removeDynamic() {
    this.groups.pop();

    // Debug
    console.log('removeDynamic() run');
  }
};

//export {AppComponent};

AppComponent的模板：

<p>
  <button type="button" class="btn btn-default" (click)="removeDynamic()">
    Remove last dynamic
  </button>
</p>

<accordion>
  <accordion-group heading="This is the header" is-open="true">
    This is the content
  </accordion-group>
  <accordion-group [heading]="group.heading" *ngFor="#group of groups">
    {{group.content}}
  </accordion-group>
  <accordion-group heading="Another group" [is-open]="isOpen">
    More content
  </accordion-group>
</accordion>

由于 Webpack，我的 Angular 应用程序在其他地方被引导。

我有一个使用 Angular 2 和 ES6/ES7 编写的自定义 Accordion 组件：

// Import Inject, Component and View constructor (for metadata)
import {Inject} from 'angular2/core';
import {Component, View} from 'angular2/core';
// Import NgClass directive
import {NgClass} from 'angular2/common';

// # Accordion Component

// Annotate Accordion class with `Component`
@Component({
  // Define how we can use our `Component` annotation with
  // the `selector` property. 
  selector: 'accordion, [accordion]',

  // Modify the `host` element with a css class designator
  host: {
    'class': 'panel-group'
  }
})

// Define the view of our `Component` using one or more
// `View` annotations
@View({

  // Link to our external template file
  templateUrl: './components/accordion/accordion.html'
})

// Create and export `Component` class
export class Accordion {

  constructor() {
    // Debug
    console.log('Accordion constructor() go');

    this.groups = [];
  }

  // Function to register groups
  addGroup(group) {
    this.groups.push(group);
  }

  closeOthers(openGroup) {
    this.groups.forEach((group) => {
      if(group !== openGroup) {
        group.isOpen = false;
      }
    });
  }

  removeGroup(group) {
    let index = this.groups.indexOf(group);

    if(index !== -1) {
      this.groups.splice(index, 1);
    }
  }
}

// # AccordionGroup Component

// Annotate AccordionGroup class with `Component`
@Component({
  selector: 'accordion-group, [accordion-group]',

  // Specify (with the `inputs` property) that we are using a `heading`
  // attribute in our  component which will be mapped to a `heading`
  // variable in our `Component`.
  inputs: ['heading', 'isOpen'],

  // Let Angular know about any `providers`
  providers: []
})

// Define the view of our `Component` using one or more
// `View` annotations
@View({

  // Link to our external template file
  templateUrl: './components/accordion/accordion-group.html',

  // Specify which directives our `Component` will utilize with
  // the `directive` property of the `View` annotation
  directives: [NgClass, Accordion]
})

// Create and export `Component` class
export class AccordionGroup {

  constructor(accordion) {
    // Debug
    console.log('AccordionGroup constructor() go');

    this._isOpen = false;

    this.accordion = accordion;

    this.accordion.addGroup(this);
  }

  // Angular 2 DI desugar'd
  // Reference: https://stackoverflow.com/questions/33026015/how-to-inject-angular2-http-service-into-es6-7-class
  /*static get parameters() {
    return [[Accordion]];
  }*/

  toggleOpen(event) {
    event.preventDefault();
    this.isOpen = !this.isOpen;
    this.accordion.closeOthers(this);
  }

  onDestroy() {
    this.accordion.removeGroup(this);
  }
}

// The above desugar'd Angular 2 DI should work, but doesn't. This
// line seems to accomplish what we are looking for though.
AccordionGroup.parameters = [[Accordion]];

//export {Accordion, AccordionGroup};

这是Accordion 组件的模板：

<ng-content></ng-content>

还有我的AccordionGroup 组件的模板：

<div class="panel panel-default" [ngClass]="{'panel-open': isOpen}">
  <div class="panel-heading" (click)="toggleOpen($event)">
    <h4 class="panel-title">
      <a href tabindex="0"><span>{{heading}}</span></a>
    </h4>
  </div>
  <div class="panel-collapse" [hidden]="!isOpen">
    <div class="panel-body">
      <ng-content></ng-content>
    </div>
  </div>
</div>

顺便说一句，很多代码都来自这个特定的教程，它使用 TypeScript 演示了所有 Angular 2 的东西，所以我只是简单地将它调整到我的 es6/es7 环境和 Webpack | Migrating Directives to Angular 2

更新：我已经尝试了两个提交的答案，但都没有解决视图不更新的问题。

这是组件当前行为的屏幕截图：

另一个显示数据操作的调试日志：

伙计们，我很茫然，我真的不能使用 TypeScript :(

Answer 1

根据马克的评论编辑

事实上，这是 Angular2 处理变更检测的方式。 “当更改检测运行并且它对对象进行脏检查时，它会检查对象引用是否更改（它不会检查对象的内容是否更改）。” （来自马克的评论）

（如果您对区域在 Angular2 中的使用方式感兴趣，您可以看看 Mark 的精彩回答：What is the Angular2 equivalent to an AngularJS $watch?）。

所以你需要重构一下你的 removeDynamic 方法：

export class AppComponent {
  (...)

  removeDynamic() {
    this.groups.pop();

    this.groups = this.groups.slice();

    // Debug
    console.log('removeDynamic() run');
  }
}

有关slice 方法的使用，请参阅此答案：

• Populating another array from array - Javascript

以下是 Angular 团队对此行为的回答：https://github.com/angular/angular/issues/6458。

希望对你有帮助 蒂埃里

Answer 2

我在这个 plnkr 中有一个准系统版本。

@Component({
  selector: 'my-app',
  providers: [],
  template: `
      <div class="panel panel-default" [ngClass]="{'panel-open': isOpen}">
        <div class="panel-heading" (click)="toggleOpen($event)">
          <h4 class="panel-title">
          </h4>
        </div>
        <div class="panel-collapse" [ngClass]="{'hidden': isOpen}">
          <div class="panel-body">
            <h3>geee</h3>
          </div>
        </div>
      </div>
  `,
  directives: [NgClass]
})
export class App {
  public isOpen = false;

  public groups = [
    {
      heading: 'Dynamic 1',
      content: 'I am dynamic!'
    },
    {
      heading: 'Dynamic 2',
      content: 'I am dynamic as well'
    }
  ];

  constructor(){
    this.isOpen = false;
    this.groups = [
      {
        heading: 'Dynamic 1',
        content: 'I am dynamic!'
      },
      {
        heading: 'Dynamic 2',
        content: 'I am dynamic as well'
      }
    ];
  }
  toggleOpen(event) {
    event.preventDefault();
    this.isOpen = !this.isOpen;
    //this.accordion.closeOthers(this);
  }

}

http://plnkr.co/edit/MjQ0GDimtqi20zmrDAEB?p=preview