Angular-使用服务将组件插入另一个组件

时间:2019-04-20 17:21:11

标签: angular angular-components

所以我希望能够将组件传递给服务,然后服务将插入该组件并将数据传递给另一个组件,例如:

app.component:需要在旁边显示信息,调用aside.show(组件,数据) aside.service:接收组件和数据并将其插入aside.generic。

仅通过调用aside.service并传递一些参数来显示一旁,如果您使用ngx-bootstrap,我希望它能够按照模态在那里工作的方式工作。

1 个答案:

答案 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

这应该使您对在特定情况下如何实施它有一个清晰的认识