角度-生成零部件到车身标签 [英] Angular - Generate component to body tag
问题描述
我尝试为根元素生成一个组件.
当前，我找到了一些与我想要的资源接近的资源，但是使用了已弃用的 DynamicComponentLoader .
公共组件:任何；构造函数(公用dcl:DynamicComponentLoader，public _injector:注入器，公共_elementRef:ElementRef){}公众点击(){if(this.component！=未定义){this.component.then(((componentRef:ComponentRef)=> {componentRef.dispose();返回componentRef;});}this.component = this.dcl.loadNextToLocation(Form，this._elementRef);} 这是
现在我的问题是:无需在模板内部引用它，当前生成body标记组件的方法是什么?
这是希望的模板输出类型:
点击前:
< body>< app>< button(click)="click()"></app><身体> 点击后:
< body>< app>< button(click)="click()"></app><我的指令>...</my-directive><身体> 谢谢您的帮助！
您可以将应用程序的 ViewContainerRef 传递给另一个组件，以用作渲染目标.
存储应用程序组件的 ViewContainerRef :
导出类AppComponent {构造函数(公共viewContainerRef:ViewContainerRef){}} 将其传递给另一个组件:
< form-renderer [target] ="viewContainerRef"></form-renderer> 在应用程序组件旁边呈现表单:
导出类FormRenderer实现OnInit {@Input('target')目标:ViewContainerRef;构造函数(私有componentFactoryResolver:ComponentFactoryResolver){}ngOnInit(){//您可能需要在setTimeout中执行此操作让componentFactory = this.componentFactoryResolver.resolveComponentFactory(Form);this.target.createComponent(componentFactory);}} I try to generate a component to the root element.
Currently, I have found some resource which is close to what I want, but using the DynamicComponentLoader which is deprecated.
public component: any;
constructor(
public dcl: DynamicComponentLoader,
public _injector: Injector,
public _elementRef: ElementRef
) {
}
public click() {
if(this.component != undefined){
this.component.then((componentRef:ComponentRef) => {
componentRef.dispose();
return componentRef;
});
}
this.component = this.dcl.loadNextToLocation(Form, this._elementRef);
}
Here is the demo.
The result is the template is generated outside of my-app tag, but it only works because the code is inside my-app tag's component, and it generates the new element to its sibling.
Now my question is : what is the current way to generate a component to the body tag, without have to reference it inside templates ?
Here the kind of template output wished :
Before click :
<body>
<app>
<button (click)="click()">
</app>
<body>
After click :
<body>
<app>
<button (click)="click()">
</app>
<my-directive>
...
</my-directive>
<body>
Thank you for your help !
You could pass your app's ViewContainerRef to another component to be used as a rendering target.
Store your app component's ViewContainerRef:
export class AppComponent {
constructor(public viewContainerRef: ViewContainerRef) { }
}
Pass it to another component:
<form-renderer [target]="viewContainerRef"></form-renderer>
Render the form next to the app component:
export class FormRenderer implements OnInit {
@Input('target') target: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
ngOnInit() {
// You may need to do this inside a setTimeout
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(Form);
this.target.createComponent(componentFactory);
}
}
这篇关于角度-生成零部件到车身标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
