所以我希望能够将组件传递给服务,然后服务将插入该组件并将数据传递给另一个组件,例如:
app.component:需要在旁边显示信息,调用aside.show(组件,数据) aside.service:接收组件和数据并将其插入aside.generic。
仅通过调用aside.service并传递一些参数来显示一旁,如果您使用ngx-bootstrap,我希望它能够按照模态在那里工作的方式工作。
答案 0 :(得分:1)
我认为您想添加动态组件:
因此,要通过使用服务添加动态组件,您可以这样做:
在您的app.component.ts
import { Component, ViewContainerRef, OnInit } from '@angular/core';
import { Service } from './service'
import { DynamicComponent } from './dynamic.component'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
constructor(public service: Service, public viewContainerRef: ViewContainerRef) {
}
add(){
this.service.setRootViewContainerRef(this.viewContainerRef);
this.service.addDynamicComponent()
}
}
并在您的service.ts
中:
import {
ComponentFactoryResolver,
Injectable,
Inject,
ReflectiveInjector
} from '@angular/core'
import { DynamicComponent } from './dynamic.component'
@Injectable()
export class Service {
rootViewContainer:any;
constructor(private factoryResolver: ComponentFactoryResolver) { }
public setRootViewContainerRef(viewContainerRef) {
this.rootViewContainer = viewContainerRef
}
public addDynamicComponent() {
const factory = this.factoryResolver.resolveComponentFactory(DynamicComponent)
const component = factory.create(this.rootViewContainer.parentInjector)
this.rootViewContainer.insert(component.hostView)
}
}
我创建了一个有效的stackblitz url,它的作用相同:
下面是链接:
https://stackblitz.com/edit/dynamic-component-j2m3c1?file=app%2Fservice.ts
这应该使您对在特定情况下如何实施它有一个清晰的认识