Angular 2将所有输入和输出注入扩展组件
问题描述:
我需要一种方法将输入和输出自动注入到一个封装组件中。Angular 2将所有输入和输出注入扩展组件
该设置是一个SimpleComponent它有一些输入和输出。 我想将这个元素包装在另一个元素中,并且这已经通过创建一个扩展SimpleComponent的ExtendedComponent来实现。
此ExtendedComponent具有SimpleComponent的所有输入和输出,我想要一种方法将这些输入和输出自动注入到模板中。
下面提供了简化的代码片段来说明问题。
app.component.html
<app-extended-component [sampleInput1]="4" [sampleInput2]="'sample string'" (sampleOutput)="handleEvent()"></app-extended-component>
simple.component.ts
@Component({
selector: 'app-simple-component',
templateUrl: './simple.component.html',
})
export class SimpleComponent {
@Input() sampleInput1: number;
@Input() sampleInput2: string;
@Output() sampleOutput = new EventEmitter();
constructor() {
}
onClick() {
this.sampleOutput.emit();
}
}
simple.component.html
<div class="wrapper" (click)="onClick()">
{{sampleInput1}}
{{sampleInput2}}
</div>
个extended.component.ts
@Component({
selector: 'app-extended-component',
templateUrl: './extended.component.html',
})
export class ExtendedComponent extends SimpleComponent {
constructor() {
super();
}
}
extended.component.html
// Need a way to automatically inject all inputs and outputs into this component
<app-simple-component></app-simple-component>
// It can be done manually like below, but this is not the intended solution
<app-simple-component [sampleInput1]="sampleInput1" [sampleInput2]="sampleInput2"></app-simple-component>
答
使用输入你可以从父组件到子组件的价值观,有eventHandler
与父输出相关组件并从子组件获取值。
:
在子组件的HTML
<app-extended-component [sampleInput1]="4" [sampleInput2]="'sample string'" (click)="handleEvent()"></app-extended-component>
在父组件的HTML
< (simpleOutput)="handleEvent($data)" />
在子组件TS
onClick() {
this.sampleOutput.emit(some object data here`enter code here`);
}
答
我正在寻找同样的问题,并且我找到了您的文章而没有回答。
它不适用于版本< 2.3.0-rc.0 如果要使用它,必须将@Input放在子组件中或升级角度版本。
但是,我希望,因为你张贴了这个消息,你找到了解决办法:)
我知道如何做到这一点,但我的父自动分配输入和输出的手段了。 – Carlton