ng-content 是一个组件吗？它是如何实施的？

Question

在 Angular 2 中，组件有自己的范围，因此其模板中任何数据绑定的绑定上下文都是组件本身。 NG2 没有外部绑定上下文的概念（又名 ng1 中的 $scope、xaml 中的 datacontext、aurelia/knockout 中的 bindingcontext 等），这很糟糕而且很奇怪，但不是这个问题的重点。我的问题是 ng-content 是如何实现的？

假设子组件有以下模板：

<div><ng-content></ng-content></div>

假设父组件有以下模板：

<child><input [(ngModel)]="name"></child>

并且说父母和孩子都有一个“名字”属性......

如果我理解正确，在运行时输入元素的绑定上下文将是父元素，而不是子元素，尽管事实上父元素的内容被转置为子元素......这是如何实现的？我有一个子组件，它使用 DynamicComponentLoad 将内容（不是来自父级）动态插入到自身中，并且需要绑定上下文保持为父级？有人有想法么？有没有人知道 ng-content 如何使这项工作发挥作用？我了解输入绑定是如何工作的，并且我了解服务是如何工作的......但是这些都不是我想要的......在我的组件中，我将动态添加内容，但我需要这个内容的绑定上下文是外部组件...

谢谢

Answer 1

如果你想使用子上下文，你需要像这样利用模板：

<child>
  <template let-name>
    <input [(ngModel)]="name">
  </template>
</child>

在这种情况下，不要使用ng-content，而是像这样创建一个嵌入式视图：

@Component({
  selector: 'child',
  template: `
    <div #target></div>
  `
})
export class Child Components  {
  name: string = 'some value';

  @ViewChild('target', {read: ViewContainerRef}) target;
  @ContentChild(TemplateRef) template: TemplateRef;

  constructor(private cdr:ChangeDetectorRef) {

  }

  ngAfterViewInit() {
    let viewRef = this.target.createEmbeddedView(this.template, {
      $implicit: this.name
    });
    this.cdr.detectChanges();
  }
}

在这种情况下，使用子组件的属性而不是父组件。

一种快捷方式是使用局部变量引用子组件并使用它来获取其属性值：

<child #c>
  <input [(ngModel)]="c.name">
</child>