我想为已经部署在Angular 2中的一些组件创建扩展,而不必几乎完全重写它们,因为基本组件可能会发生更改,并希望这些更改也反映在其派生组件中.
我创建了这个简单的例子,试图更好地解释我的问题:
使用以下基本组件app/base-panel.component.ts:
import {Component, Input} from 'angular2/core';
@Component({
selector: 'base-panel',
template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
styles: [`
.panel{
padding: 50px;
}
`]
})
export class BasePanelComponent {
@Input() content: string;
color: string = "red";
onClick(event){
console.log("Click color: " + this.color);
}
}
您是否只想更改另一个衍生组件,例如,在示例颜色的情况下,基本组件行为app/my-panel.component.ts:
import {Component} from 'angular2/core';
import {BasePanelComponent} from './base-panel.component'
@Component({
selector: 'my-panel',
template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
styles: [`
.panel{
padding: 50px;
}
`]
})
export class MyPanelComponent extends BasePanelComponent{
constructor() { …我有3个组件.1个父组件,可以包含ng-content中任意2个子组件之一.我的子组件具有共享功能,因此它们扩展了具有共享功能的抽象类.
当我尝试使用ContentChildren获取ng-content引用时,如果我使用其中一个子类,它可以正常工作.当我引用抽象类时,它不起作用.有没有办法让这项工作？plkr是:http://plnkr.co/edit/f3vc2t2gjtOrusfeesHa？p =preview
这是我的代码:
儿童抽象课:
abstract export class Child{
value: any;
abstract setValue();
}
我的父代码:
@Component({
selector: 'parent',
template: `
<div>
parent
<ng-content></ng-content>
</div>
`,
})
export class Parent {
@ContentChild(Child)
child: Child;
name:string;
constructor() {
}
ngAfterViewInit() {
this.child.setValue();
}
}
第一个孩子:
@Component({
selector: 'child1',
template: `
<div>
value is: {{value}}
</div>
`,
})
export class Child1 extends Child {
name:string;
constructor() {
}
setValue() {this.value = 'Value from child 1'}
}
第二个孩子:
@Component({
selector: 'child2',
template: …我的问题是这里对另一个问题的扩展:Angular2和类继承支持
这是我的蠢货:http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ？p =preview
我想要做的是以下内容:
我有一些常见的功能,我的所有组件都必须使用.正如在上述问题中已经回答的那样,这可以做到.
我的问题是:我可以在基础组件中注入依赖项吗？在我的plunkr中,声明的dependency(FormBuilder)在登录到控制台时是未定义的.
import {AfterContentChecked, Component, ContentChildren, Input, QueryList, forwardRef, provide, Inject} from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
@Component({
providers: [FormBuilder]
})
export class BaseComponent {
// Interesting stuff here
@Input() id: string;
constructor(formBuilder: FormBuilder){
console.log(formBuilder);
console.log('inside the constructor');
}
}
@Component({
selector: 'child-comp2',
template: '<div>child component #2 ({{id}})</div>',
providers: [provide(BaseComponent, { useExisting: forwardRef(() => ChildComponent2) })]
})
export class ChildComponent2 extends BaseComponent {
}
@Component({ …我试图通过继承一些具有一些Input属性的基类来实现angular 2的组件（我已使用此示例作为实现angular 2组件的继承的指南）。
简化示例
export class ComponentBase {
@Input() text: string = "base";
}
@Component({
selector: "derived-comp",
templateUrl: "derived-comp.template.html",
providers: [
{ provide: ComponentBase, useExisting: forwardRef(() => DerivedComponent) }
]
})
export class DerivedComponent extends ComponentBase {
@Input() dummy: number;
}
一切都按预期工作，直到我在派生组件中添加了一个新的Input属性（虚拟，在提供的示例中）。当我这样做时，基类中定义的所有Input属性在运行时都变得不可见（尽管在编译时一切正常），并且浏览器控制台中出现错误，指出这些输入不存在：
无法绑定到“文本”，因为它不是“ derived-comp”的已知属性。
有没有人在角度2中有类似的组件继承问题？是否有人对如何克服它有建议（除了复制粘贴代码外）？
我正在尝试实现一个能够触发search(term: string)特定孩子的功能的搜索组件.如果对子项的搜索失败或者对子项的引用成功,则此搜索函数将返回null.
这是因为我想"收集"对列表中成功的角度组件的所有引用,以便我可以将它们设置为"new"ContentChildren,因此实际上进行基本过滤.
这是我到目前为止:
search.component.html
<input (value)="searchterm" />
<ng-content>
<!-- all components that implements iSearchable here -->
</ng-content>
search.component.ts
...
export class searchComponent implements OnChanges
{
@Output('searchterm')
public searchterm: string;
// 1. Problem: ContentChildren does not work with interfaces?
@ContentChildren(Isearchable)
searchContent: QueryList<Isearchable>
// 2. Problem: ngOnChanges will not fire when searchterm is changed
ngOnChanges(event)
{
var toBeShown = [];
// go through and let the components filter themselves
for(let i = 0; i < this.searchContent.length; i++)
{
var …