Угловой (2+) компонент, обеспечивающий привязку к проецируемому контенту - PullRequest
Новая
       19

Угловой (2+) компонент, обеспечивающий привязку к проецируемому контенту

0 голосов
/ 19 сентября 2018

При наличии корневого компонента без свойств этот шаблон корневого компонента выдаст ошибку: 

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

Ответы [ 3 ]

0 голосов
/ 19 сентября 2018

foo-provider.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-foo-providers',
  template: `
  <h1>My name is {{foo}}</h1>
  `,
  styleUrls: ['./foo-providers.component.css']
})
export class FooProvidersComponent {

  foo = 'john';
  constructor() { }

}

app.component.ts 

Hey there,
<app-foo-providers></app-foo-providers>
<ng-content></ng-content>

Вывод 

Hey there,
My name is john
0 голосов
/ 20 сентября 2018

Я бы сказал, что это возможно.

Имея структурную директиву вроде: 

@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 Пример

0 голосов
/ 19 сентября 2018

Вы не можете.Проекция контента - это обертка и управление местом вставки контента, а не предоставление значений для вставленного контента.Это связано с тем, что проекция контента позволяет вставлять ЛЮБОЙ контент, и нет смысла предоставлять значения по умолчанию, поскольку значения, которые могут быть указаны во вставленном контенте, полностью неизвестны.

Если вы хотите избежать определения 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

...