Angular (2+) 组件提供对投影内容的绑定

Question

给定一个没有属性的根组件，这个根组件模板会给出一个错误：

<div>My name is {{foo}}.</div>

我想创建一个组件 (FooProvider) 来投影其内容，但还为“foo”提供了一个绑定，这样我就可以在我的根组件中写入：

<foo-provider>
    <div>My name is {{foo}}.</div>
</foo-provider>

换句话说：如何将绑定放入 <ng-content> ？

更新：

将此作为结构指令尝试也不起作用。 这里有什么问题？ （角 5.2.11）

这是根组件：

<ng-container *foo-provider>
    <div>foo = {{foo}}</div>
</ng-container>

这是 FooProviderDirective：

import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';

interface FooContext {
  foo: string;
}

@Directive({
  selector: '[foo-provider]'
})
export class FooProviderDirective {
  constructor(
    private readonly viewRef: ViewContainerRef,
    private readonly templateRef: TemplateRef<FooContext>
  ) {
    const context: FooContext = { foo: 'baz' };
    this.viewRef.createEmbeddedView(this.templateRef, context);
  }
}

Answer 1

你不能。 内容投影是关于包装器和管理内容插入的位置，而不是为插入的内容提供值。 这是因为内容投影允许插入任何内容，并且提供默认值是没有意义的，因为在插入的内容中可能提供的值是完全未知的。

如果你想避免在根组件中定义 foo ，那么在一个单独的<foo>组件中定义它，如下所示：

<foo-provider>
  <foo [fooValue]="'Fred'"></foo>
</foo-provider>

<foo>看起来像这样：

<div>my name is {{ fooValue }}</div>

并且<foo> .ts 控制器可以提供一个没有给出值的默认值。

此外，虽然这篇 github 帖子没有解决相同的问题，但它确实提供了一种使用默认内容的方法，其中没有提供任何内容，并且您可能会感兴趣：

https://github.com/angular/angular/issues/12530

Answer 2

我会说这是可能的。

具有结构指令，如：

@Directive({
  selector: '[foo-provider]'
})
export class FooProviderDirective {
  constructor(
    private readonly viewRef: ViewContainerRef,
    private readonly templateRef: TemplateRef<any>
  ) {
    const context = { $implicit: 'baz' };
    this.viewRef.createEmbeddedView(this.templateRef, context);
  }
}

您应该能够编写如下内容：

<div *foo-provider="let foo">
  foo = {{ foo }}
</div>

吴运行示例