Question

在angular 2组件中有自己的范围，因此模板中任何数据绑定的绑定上下文都是组件本身。 NG2没有外部绑定上下文的概念（也就是ng1中的$ scope，xaml中的datacontext，aurelia / knockout中的bindingcontext等等）这是坏的和奇怪但不是这个问题的焦点。我的问题是如何实施ng-content？

Say child组件具有以下模板：

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

假设父组件具有以下模板：

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

并说父母和孩子都有一个名字＆＃34;属性...

如果我理解正确，在运行时输入元素的绑定上下文将是父级，而不是子级，尽管父级的内容被转换为子级...这是如何实现的？我有一个子组件，它使用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>

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

1 个答案: