Question

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

当我加载页面时，我得到了包含所有相应数据的组件手风琴，但是所有面板都关闭，单击不执行任何操作。我在TypeScript Plunker之后对手风琴进行建模。此外，当您单击按钮时，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的东西，所以我只是用Webpack将它改编成我的es6 / es7环境。 Migrating Directives to Angular 2

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

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

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

我在这里不知所措，我真的不能使用TypeScript :(

Answer 1

按照Mark的评论编辑

事实上，它是Angular2处理变化检测的方式。＆＃34;当更改检测运行并且脏检查对象时，它通过检查对象引用是否更改（它不检查对象的内容是否更改）来执行此操作。＆＃34; （来自马克的评论）

（如果你对Zular在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

Angular 2：自定义组件的问题

2 个答案: