2
我目前正在尝试使用ES6/ES7编写Angular 2中的自定义组件，并使用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。
我采用了棱角分明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>
作为一个asi de，很多代码都来自这个特别的教程，它演示了TypeScript的所有Angular 2的东西，所以我简单地将它改编到我的es6/es7环境中，使用Webpack | Migrating Directives to Angular 2
更新：我已经尝试了两个提交的答案，并且都没有解决视图不更新的问题。
这里是如何将组件目前表现抓屏：
的调试日志显示的数据操纵和另一：
我很茫然这里的家伙，我真的不能使用TypeScript :(
如果我改变了'AccordionGroup'模板，这一点，它没有任何渲染，看似。 –
它只是上面的片段，我改变了.. – inoabrian
不，我看你改变了，谢谢你。我会试一试。 –