Question

ng-content似乎在定义组件的位置定义了DI，而不是在运行时渲染组件的位置。该行为似乎是设计使然，有助于重用外部库。

然后，如果我需要在运行时进行DI工作，该怎么办？

import { Component, Input, Optional, OnInit } from '@angular/core';
import { WrapComponent } from './wrap.component'

@Component({
  selector: 'inner',
  template: `<div>Inner component {{ data }}, got wrap: {{ wrap !== null }}</div>`,
})
export class InnerComponent implements OnInit  {
  @Input() data: string;
  constructor(@Optional() private wrap: WrapComponent){
  }
  ngOnInit(){
    console.log(this.data)
  }
}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'wrap',
  template: `<div><ng-content></ng-content></div>`,
})
export class WrapComponent  {
}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'outer',
  template: `<wrap><ng-content></ng-content></wrap>`,
})
export class OuterComponent  {
}

因此，当app.html为“

”时，让内部组件进行包装组件注入

<outer> <inner></inner> </outer>

stackblitz

如何在DI支持下实现嵌套的ng-content？

0 个答案: