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

【问题标题】：Angular (2+) Component providing a binding to projected ContentAngular (2+) 组件提供对投影内容的绑定
【发布时间】：2019-02-23 02:10:58
【问题描述】：

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

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

我想创建一个组件 (FooProvider) 来投射其内容，但还为“foo”提供绑定，以便我可以在我的根组件中编写：

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

换句话说：如何将绑定放入？

更新：

尝试将此作为结构指令也不起作用。这里有什么问题？（角度 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);
  }
}

【问题讨论】：

标签： angular binding angular2-directives projection

【解决方案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

【讨论】：

【解决方案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>

Ng-run Example

【讨论】：