Question

我想将ng-content绑定到子组件属性。可能吗？例如，<myComponent>123</myComponent> MyComponent.content应设置为123。

@Directive({
  selector: 'myComponent'
})
class MyComponent {
  content;          // should be set to 123
}

@Component({
  selector: 'app',
  directives: [MyComponent],
  template: `
    <myComponent>123</myComponent>
  `
})
export class App { }

Answer 1

如果您需要绑定 - 即值[{1}}可以更改 - 并且您希望指令获取任何更改，请实施lifecycle hook ngAfterContentChecked()：

Plunker

请注意，每次更改检测运行时都会调用ngAfterContentChecked（）。因此，如果您真的需要绑定，请仅使用此方法。

Answer 2

@Directive({
  selector: 'myComponent'
})
class MyComponent {
  content;          // should be set to 123

  constructor(private elementRef:ElementRef) {
    this.content = this.elementRef.nativeElement.innerHTML;
  }

  // to ensure bindings have been resolved
  // see also 
  // https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#aftercontent
  afterContentChecked() {
    this.content = this.elementRef.nativeElement.innerHTML;
  }
}

Plunker example

如何将ng-content绑定到属性？

2 个答案: