Angular 在逻辑组件树中创建具有不同位置的动态组件

我希望构建一个组件，该组件使用Angular的

componentFactoryResolver

和

componentFactory

将组件动态注入DOM，但使用传入的viewContainerRef确定可注入的内容

@Component({
  selector: 'my-component-loader',
  template: ``
})
export class MyComponentLoader implements OnInit  {

  constructor(private viewContainerRef: ViewContainerRef,
              private componentFactoryResolver: ComponentFactoryResolver,
              private componentLoaderService: ComponentLoaderService) {
  }

  ngOnInit() {
      this.componentLoaderService.loadComponent.pipe(
        tap((component, componentViewContainerRef) => this.loadComponent(component, componentViewContainerRef))
      ).subscribe();
  }

  loadComponent(component, callerViewContainerRef) {
    this.viewContainerRef.clear();

    const factory = this.componentFactoryResolver.resolveComponentFactory(component);
    this.viewContainerRef.createComponent(factory);
  }
}

如何在

my component loader

位置中加载组件，以及

callerViewContainerRef

中的逻辑位置，以便创建的组件具有可用于

callerViewContainerRef

的DI树

简而言之，这在方式上类似于Material的MatDialog

有没有一种更简单的方法来处理而不复制角度CDK门户逻辑

**编辑**

这和传入callerViewContainerRef的注入器一样简单吗

this.viewContainerRef.createComponent(factory, 0 , callerViewContainerRef.injector);

这和传入callerViewContainerRef的注入器一样简单吗

我认为这是正确的。这是我的一个单独的例子，它让我有了更好的理解

app.tokens.ts

export const FooToken=new InjectionToken（'foo'）；

app.module.ts

@NgModule({
/* ... */
供应商：[
{
提供：FooToken，
useValue:{message:'default foo value'}
}
]
})
导出类AppModule{}

app.component.ts

@组件({
选择器：“我的应用程序”，
模板：`
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
@ViewChild（'vcr'，{static:true，read:ViewContainerRef}）
录像机：ViewContainerRef；
ngAfterViewInit（）{
const compFactory=此.cfr.resolveComponentFactory（FooComp）；
const inj=Injector.create({
供应商：[
{
提供：FooToken，
useValue:{message:'这只是来自动态注入器的一条foo消息！'
}
]
})
这个.vcr.createComponent（compFactory，0，inj）；
}
}

foo.component.ts

@组件({
选择器：“foo”，
模板：`Foo`
})
出口级食品公司{
构造函数（@Inject（FooToken）private FooToken）{
console.log（“[FOO]”，this.fooToken）
}
}

如果按原样运行代码，应该会在foo的构造函数中看到

{message:'这只是来自动态注入器的foo消息！'

但是，如果在未指定自定义喷油器的情况下创建部件

this.vcr.createComponent（compFactory）；

您应该看到：

{message:'default foo value'}

你可以在我的书里找到上述想法

这和传入callerViewContainerRef的注入器一样简单吗

我认为这是正确的。这是我的一个单独的例子，它让我有了更好的理解

app.tokens.ts

export const FooToken=new InjectionToken（'foo'）；

app.module.ts

@NgModule({
/* ... */
供应商：[
{
提供：FooToken，
useValue:{message:'default foo value'}
}
]
})
导出类AppModule{}

app.component.ts

@组件({
选择器：“我的应用程序”，
模板：`
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
@ViewChild（'vcr'，{static:true，read:ViewContainerRef}）
录像机：ViewContainerRef；
ngAfterViewInit（）{
const compFactory=此.cfr.resolveComponentFactory（FooComp）；
const inj=Injector.create({
供应商：[
{
提供：FooToken，
useValue:{message:'这只是来自动态注入器的一条foo消息！'
}
]
})
这个.vcr.createComponent（compFactory，0，inj）；
}
}

foo.component.ts

@组件({
选择器：“foo”，
模板：`Foo`
})
出口级食品公司{
构造函数（@Inject（FooToken）private FooToken）{
console.log（“[FOO]”，this.fooToken）
}
}

如果按原样运行代码，应该会在foo的构造函数中看到

{message:'这只是来自动态注入器的foo消息！'

但是，如果在未指定自定义喷油器的情况下创建部件

this.vcr.createComponent（compFactory）；

您应该看到：

{message:'default foo value'}

你可以在我的书里找到上述想法