在 Angular2 中传递组件 [英] Passing Components in Angular2
问题描述
假设我想变得非常抽象和模块化,并且我想将组件作为输入传递给我的子组件.
这可能吗?
我知道我可以传递输入并在内部创建组件,但有时我想传递不同的/组件,否则我必须为每个组件自定义代码,而且我不能对操作进行抽象.
>例如,假设我有组件 P 作为父级,C 作为子级,我对 C 这样的设计有一定的目的,我希望 C 作为可重用的组件,每当我想实现这个特定的设计时里面有元素.
现在,如果我想让 C(两个单独的元素)环绕两个不同的组件,让我们称它们为 A &B. 我希望 P 能够在创建它们后将它们传递给 C 以保持设计抽象,同时能够仅将组件用作 C 中的变量.
是的,这是可能的.实际上是 Angular2 中模块化组件的组合方式.
例如,如果您有一个模态组件并且您想在整个应用程序中使用它,但该组件只是一个包装器,需要向其中添加动态组件.
这是一个 ComponentFactoryResolver 的例子:
@Component({选择器:'我的动态组件',模板:'这是一个动态注入的组件!'})导出类 MyDynamicComponent {}@成分({选择器:'包装器',模板:`<div><p>包装组件</p><模板#dynamicComponent></template>
`})导出类 WrapperComponent {@Input() contentComponent: 任何;@ViewChild('dynamicComponent', { 读取:ViewContainerRef })动态组件:任何;构造函数(私有组件解析器:ComponentFactoryResolver){}ngAfterViewInit():void {const factory = this.componentResolver.resolveComponentFactory(this.contentComponent);this.dynamicComponent.createComponent(工厂);}}@成分({选择器:'我的应用',模板:`<wrapper [contentComponent]="MyDynamicComponent"></wrapper>`})导出类 AppComponent {MyDynamicComponent: any = MyDynamicComponent;}
灵感来自 不推荐使用的 ComponentResolver 答案
可以找到另一种方法 在这里回答
Lets say i wanna get very abstract and modular and i want to pass components as input to my child components.
Is that possible?
I understand that i can pass the inputs and create the component internally, but sometimes i want to pass different/components otherwise i would have to customize the code to each component and i can't be abstract about the operation.
For Example, lets say i have component P as a parent and C as a child, i have a certain purpose for C such design and i would like to have C as a reusable component for whenever i want to implement this certain design with elements inside.
Now if i want to have C (two separate elements) wrap around two different components let's call them A & B. i want P to be able to pass them after creating them to C to keep the design abstract while being able to just use the components as a variable inside C.
Yes, it is possible. Actually is how composition for modular components works in Angular2.
So for example if you have a modal component and you want to use that all over the app, but that component is just a wrapper and it is needed to add dynamic components to it.
Here it's an example with the ComponentFactoryResolver :
@Component({
selector: 'my-dynamic-component',
template: 'this is a dynamic injected component !'
})
export class MyDynamicComponent {}
@Component({
selector: 'wrapper',
template: `
<div>
<p>Wrapper Component</p>
<template #dynamicComponent></template>
</div>
`
})
export class WrapperComponent {
@Input() contentComponent: any;
@ViewChild('dynamicComponent', { read: ViewContainerRef })
dynamicComponent: any;
constructor(private componentResolver: ComponentFactoryResolver) {}
ngAfterViewInit():void {
const factory = this.componentResolver.resolveComponentFactory(this.contentComponent);
this.dynamicComponent.createComponent(factory);
}
}
@Component({
selector: 'my-app',
template: `
<wrapper [contentComponent]="MyDynamicComponent"></wrapper>`
})
export class AppComponent {
MyDynamicComponent: any = MyDynamicComponent;
}
Inspired from deprecated ComponentResolver answer
Another way of doing this can be found answer HERE
这篇关于在 Angular2 中传递组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!