Question

给出一个没有属性的根组件，该根组件模板将给出一个错误：

<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);
  }
}

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

foo-providers.component.ts

__call__

app.component.ts

__call__

输出

__call__

Answer 3

我想有可能。

具有如下结构指令：

@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

Angular（2+）组件，提供对投影内容的绑定

3 个答案: