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>

来源

2017-03-16 Carlton

-1

使用输入你可以从父组件到子组件的价值观，有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`); 
    }

来源

2017-03-16 01:40:27

我知道如何做到这一点，但我的父自动分配输入和输出的手段了。 – Carlton

我正在寻找同样的问题，并且我找到了您的文章而没有回答。

它不适用于版本< 2.3.0-rc.0 如果要使用它，必须将@Input放在子组件中或升级角度版本。

但是，我希望，因为你张贴了这个消息，你找到了解决办法:)

来源

2017-10-03 18:57:30 Swarovski

Angular 2将所有输入和输出注入扩展组件

回答

相关问题