标签: angular2-ngcontent

我正在使用Angular 2.0.1。

我有一个可以通过其他任何组件使用的组件<ng-content>-效果很好。

我遇到的问题是当我想引用注入的组件时。

如果我知道那<ng-content>将永远只是一个组件，我可以说： @ContentChild(MyComponent) dynamicTarget: IMyComponent;但是因为它可以是任何组件（我要做出的唯一假设是任何注入的组件都实现了特定的接口），所以变得棘手。

我也尝试过<ng-content #dynamicTarget'>，然后通过说来引用它， @ContentChild('dynamicTarget') dynamicTarget: IMyComponent;但这返回未定义。

有谁知道我该如何告诉Angular 2这个东西是组件的实例，以便我可以尝试在其上调用函数？

为了进一步阐明用例，我有一个多步骤向导，可以将任何组件作为内容，并且我想validate在内容上调用该函数（同样，我会假设在上述实例中存在该函数）

我成功地<ng-content></ng-content>用来在孙子中显示一个组件,如下所示:带有客户组件的父对子组件树,但现在我想@ContentChild在那个孙子中使用来访问传入的内容,但我似乎无法得到任何工作.

这是我尝试使用选择器和@ContentChildstackBlitz:https://stackblitz.com/edit/angular-dpu4pm .无论我做什么,@ContentChild总是在TheChild组件中未定义,但在TheParent组件中工作.

@Component({
  selector: 'spinner',
  template: `
    spinner
  `,
})

@Component({
  selector: 'my-app',
  template: `
    works <the-parent><spinner #spin></spinner></the-parent>
  `,
})

@Component({
  selector: 'the-parent',
  template: 'this is parent <the-child><ng-content #content></ng-content></the-child>'
})
export class TheParent  implements AfterViewInit{

   @ContentChild('spin') spin;

  ngAfterViewInit() {
    alert('parents spin is '+typeof this.spin);  //object
  }
}

@Component({
  selector: 'the-child',
  template: 'this is child <ng-content></ng-content>'
})
export class TheChild  implements AfterViewInit{

  @ContentChild('spin') spin;
   @ContentChild('content') content;

  ngAfterViewInit() { …

定义一个简单的组件，如下所示：

@Component({
  selector: 'loader',
  template: `<div *ngIf='false'>
        <ng-content></ng-content>
        </div>`,
})
export class Loader {}

像这样使用时：

  <loader>
      {{model.something}}
  </loader>

如果在父级中未定义model，我仍然会收到模板绑定错误，因为即使使用，它也会尝试解析绑定ngIf=false。为什么会这样呢？

我有一个应用程序，我在其中使用多个表单组件组合表单。现在我想创建某种外键字段，它列出了已经存在的对象并显示了一个“添加”按钮。此按钮在模式对话框中显示另一个表单组件。该“子”表单仅使用<ng-content>. 这一切都很完美

我来说明一下情况。这是模板<form-component>：

<form class="form">
    <form-field>
        <another-form-component (save)="handleSave()"></another-form-component>
    </form-field>
</form>

的模板<form-field>：

<modal-dialog-component [(visible)]="showForm">
    <!--
        Here the <another-form-component> which was passed
        to <form-field> is added:
    -->
    <ng-content></ng-content>
</modal-dialog-component>
<div class="form-field">
    <select> <!-- existing options --> </select>
    <button (click)="openForm($event);">Create new</button>
</div>

如您所见，<another-form-component>有一个@Output()for itsave事件。这是一个EventEmitter.

我的问题是：如何EventEmitter从<form-field>组件订阅此内容？我想知道表单何时保存，以便我可以关闭<modal-dialog>.

请记住：表单是使用<ng-content>. 我可以@ViewChildren用来获取孩子<form-field>并使用某种addEventListener()方法吗？这样的东西真的存在吗？

希望你能帮我！

你好，约翰

我有以下标记:

<group-header [isOpen]="true">
    <div *ngIf="isOpen">{{'PRICE' | resource}}</div>
</group-header>

group-header的模板如下所示:

<div (click)="toggleGroups($event);">
    <ng-content></ng-content>
</div>

isOpen在我的group-header组件中定义如下:

@Input()
set isOpen(value: boolean) {
    this._isOpen = value;
}

get isOpen() {
    return this._isOpen;
}

显然我无法引用isOpen我想要的方式(或根本不是),因为我的'PRICE'资源永远不会显示.

有没有办法根据我的组件上的字段有条件地显示我的ng-content呈现内容？

希望这一切都有意义......如果不是,请问

编辑:根据@ PierreDuc的评论添加了setter :-)

问题：

@ContentChildren似乎不适用于父<ng-content>容器。即使内容是该组件的子代。

Plunker：https ://plnkr.co/edit/J5itJmDfwKwtBsG6IveP ? p = preview

注意：我正在使用{descendants: true}

示例代码：

主要HTML：

<div>
  <child>
    <test></test>
    <test></test>
    <test></test>
  </child>
  <br><br>
  <parent>
    <test></test>
    <test></test>
    <test></test>
  </parent>
</div>

子组件：

<h2>Child</h2>
<parent>
  <ng-content></ng-content>
</parent>

父组件：

<h3>Parent</h3>
<ng-content></ng-content>
<div class='length'>Line count : {{length}}</div>

问题test对于子组件，组件 的长度为0，对于父组件，组件的长度为3。

详细代码：

import {
  Component, ContentChildren, Directive
} from '@angular/core';


@Directive({selector: 'test'})
export class Test {}

@Component({
  selector: 'parent',
  template: `
    <h3>Parent</h3>
    <ng-content></ng-content>
    <div class='length'>Line count : {{length}}</div>
  `
})
export class ParentComponent  { …

我正在尝试开发一个轮播。

期望的最终结果应该是开发人员只需将整个标记写入一个位置（假设在app.component.html），仅使用一个options属性，然后轮播将接管。

问题是，carousel.component我需要设置一些属性carousel-item.component（属性app.component应该与...无关，但所有标记都在app.component.html）。

我怎样才能实现这个目标？

app.component.html:

<carousel [options]="myOptions">
    <carousel-item *ngFor="let item of items">
        <img [src]="item.image" alt="" />
    </carousel-item>
</carousel>

<hr />

<carousel [options]="myOptions2">
    <carousel-item *ngFor="let item of items">
        <img [src]="item.image" alt="" />
    </carousel-item>
</carousel>

carousel.component.html:

<div class="carousel-stage">
    <ng-content></ng-content>
</div>

carousel-item.component.html:

<ng-content></ng-content>

我正在尝试加载不同的"父"组件,并通过ng-content在每个父组件中进行定位将路由内容注入到这些不同的父组件中.基本上,每个父组件根据设备宽度(小/移动,中/平板和大/桌面)处理导航和其他样板材料.

为我的应用程序中的每个路由生成的内容需要被转换(注入)到父组件中.每条路线的内容使用特定的注入点ng-content.

我可以使用替换父组件<ng-container *ngComponentOutlet="ResponsiveComponent;"></ng-container>.问题是我的路由生成内容没有被注入ng-content每个父组件的目标位置.

这是交换父组件的代码. AppPageComponent扩展ResponsiveComponent,根据媒体查询监视设备宽度.

@Component({
    selector: 'app-page',
    template: `
        <ng-container *ngComponentOutlet="ResponsivePageComponent;"></ng-container>     
    `,  
    styleUrls: [ './page.component.scss'],
    providers: []
})
export class AppPageComponent extends ResponsiveComponent implements OnInit, OnDestroy
{
    ResponsivePageComponent;

    constructor(
        injector: Injector,
        zone: NgZone)
    {
        super(zone);    
    }

    ngOnInit()
    {       
        this.IsSmallEnvironmentStream
            .subscribe
            (
                (isSmall: boolean) =>
                { 
                    if (isSmall)
                    { 
                        this.ResponsivePageComponent= AppPageSmallComponent;
                    }                   
                },
                (err) => { },
                () => {}
            );

        this.IsMediumEnvironmentStream
            .subscribe
            (
                (isMedium: boolean) =>
                { …

嗨,我想要一些有条件的ng-content实现, 例如

<div>
   <ng-content select="[card-icon]"></ng-content>
</div>
<div  #body>
   <div *ngIf="description.children.length;else newDiv">
      <ng-content select="[card-body]"></ng-content>
   </div>
   <div #newDiv>
      <ng-content select="[card-body]"></ng-content>
   </div>
</div>
<div  style="align-self: end;" #description [ngClass]="{'hide':!(description.children.length)}">
<ng-content select="[card-description]" ></ng-content>
</div>

但#newDiv中没有​​投射任何东西.TIA.

我的子组件如下所示：

...
@Component({
    selector: '[child-component]'
    templateUrl: './child.template.html'
})
...

我的父模板如下：

<span child-component [someInput]="123"></span>

现在我想渲染子组件的内容，而<span>周围没有容器。我不想在父组件的模板中出现任何容器，只需要子组件模板的内容。

我已经尝试过其他一些标签了。

• <ng-content>（根本没有渲染任何东西）
• <ng-template>（嵌入模板上的组件：）
• <ng-container>（无法在“节点”上执行“appendChild”）

提前致谢！