标签: angular2-ngcontent

取决于(布尔)类变量的值,我希望我ng-content将其包装在div中或不包含在div中(即div甚至不应该在DOM中)...什么是最好的方法去对这个 ？我有一个尝试这样做的Plunker,在我认为是最明显的方式,使用ngIf ..但它不起作用...它只显示其中一个布尔值的内容,但不显示另一个

亲切的帮助谢谢!

http://plnkr.co/edit/omqLK0mKUIzqkkR3lQh8

@Component({
  selector: 'my-component',
  template: `

   <div *ngIf="insideRedDiv" style="display: inline; border: 1px red solid">
      <ng-content *ngIf="insideRedDiv"  ></ng-content> 
   </div>

   <ng-content *ngIf="!insideRedDiv"></ng-content>     

  `,
})
export class MyComponent {
  insideRedDiv: boolean = true;
}


@Component({
  template: `
    <my-component> ... "Here is the Content"  ... </my-component>
  `
})
export class App {}

我的简化目标是构建一个包含项目模板的列表组件.例如:

<list>item</list>

这是我的代码:

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';

@Component({
  selector: 'list',
  template: `
    <ul>
      <li *ngFor="let i of items" >
        <ng-content></ng-content>
      </li>
    </ul>
  `
})
class List {
  items = [1, 2, 3];
}

@Component({
  selector: 'app',
  directives: [List],
  template: '<list>item</list>'
})
class App { }

bootstrap(App, []);

预期结果:

• 项目
• 项目
• 项目

实际结果:

•
•
•项目

常用菜单用例

<menu>
    <menu-item1></menu-item1>
    <menu-item2></menu-item2>
    <menu-item3></menu-item3>
</menu>

菜单模板

<div *ngIf="open$ | async">
    <ng-content></ng-content>
</div>

令我惊讶的是,尽管存在于DOM和组件状态,但所有menu-item*组件(及其所有子组件)都将被实例化.即使菜单从未打开过,它们和钩子也会被调用,尽管从DOM中真正添加了删除功能,但它们永远不会触发.这是关于这个https://github.com/angular/angular/issues/13921的封闭式问题(有一个示例的plnkr)和角度文档的问题https://github.com/angular/angular.io/问题/ 3099.menu*ngIfOnInitAfterViewInitOnDestroy

但是这个问题仍然存在 - 我怎么能这样菜单项只有在打开菜单并在关闭后正确销毁时才会被实例化？所有钩子都应该仅与真实DOM状态相关.

我想要实现的是一个通用组件,它绑定到一个任意对象数组,当每个行的视图也由使用它的主组件任意定义组件时,允许动态添加和删除行.

请注意,MasterComponent是一个任意组件,可以为不同的页面实现,并且是自包含的,不是由任何元数据或外部源定义的.

到目前为止我所拥有的是以下组件:

RepeaterComponent模板:

<input type="button" value="Add" (click)="addRow()">
<div class="repeater" *ngFor="let row of repeaterArray">
    <div class="repeaterRow">
        <input type="button" value="Remove" (click)="removeRow(row.rowId)">
        <ng-content select="row"></ng-content>
     </div>
</div>

MasterComponent模板:

<repeater [repeaterArray]="repeaterObj">
    <row>
        <field-textbox [data]="row.name" [label]="'Name'"></field-textbox>
        <field-textbox [data]="row.description" [label]="'Description'"></field-textbox>
    </row>
</repeater>

该MasterComponent组件是一个自定义组件,我用它来封装简单的输入,这些输入包含我需要使用的一些额外数据.

该MasterComponent持有的对象,此实例是这样的:

repeaterObj = [
{
    "rowId": 1,
    "name": "First brand",
    "description": "First description"
},
{
    "rowId": 2,
    "name": "Second brand",
    "description": "Second description"
},
{
    "rowId": 3,
    "name": "Third brand",
    "description": "Third description"
}
]; …

我正在阅读本教程以理解角2 ng-content.我想捕获触发的事件ng-content.我有以下组件:

@Component({
    moduleId: module.id,
    selector: 'card',
    template: `
    <ng-content (click)="onClick($event)"></ng-content>
    `
})
export class CardComponent {

    onClick(){
        console.log('clicked');
    }
}

在这里,您可以看到我正在为该click事件设置一个监听器.但由于某些原因,它并没有触发.似乎整个ng-content标签都被替换了.所以为了捕获当前我正在做的事件:

template: `
    <div (click)="onClick($event)">
      <ng-content></ng-content>
    </div>
    `

有没有更好的方法来做到这一点？因为我不想我的包裹ng-content成一个div,以避免造型的问题.谢谢.Plnkr

我只是从本教程中学习Transluctionin 的用法angular2：

https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

我可以将<ng-content>标记用于某些内容，例如：

<ng-content select="[my-block-header]"></ng-content>

它位于my-block附加选择器的组件中。

它将来自其他组件的内容呈现为：

<my-block>
    <div class="box-header" my-block-header> <--added the slot selector here
        <h3 class="box-title">
            My title
        </h3>
    </div>
</my-block>

问题是：

<ng-content>如果我们没有传递任何值，是否可以将默认值添加到可以使用的块中？

到目前为止，如果没有传递任何值，则该位置将出现空白页。

编辑：

当我尝试测试时，有一个较新的版本zone.js不允许显示正确的错误，因此我得到的错误为：

Cannot set property 'stack' of undefined ; Zone: <root> ; 
Task: Promise.then ; Value: TypeError: Cannot set property 'stack' of undefined

但是，当我改变的版本zone.js到0.7.2错误控制台作为清楚地提到：

zone.js:392 Unhandled Promise rejection: Template parse errors:
<ng-content> element cannot have content.

因此，它确认没有任何默认值设置为 <ng-content>

我试图在组件中包含css for children元素ng-content.它似乎尚未在Angular 2中实现,或者除了将css放在一般样式表中之外,有人可能有解决方案？

app.component.ts

<comp-parent>
  <comp-child></comp-child>
</comp-parent>

compParent.component.html

<div class="wrapper">
  <ng-content></ng-content>
</div>

compParent.component.css

.wrapper > comp-child {
   margin-right: 5px; <-- Not applied !!!
}

我们正在开发一个企业组件库,它应该提供Material Designed Angular Components.所以这个库的用户不应该直接使用例如Angular Material,而是包括一些像" custom-tabs " 这样的组件.

使用MatTabModule的组件直接像魅力一样工作,而在使用我们的自定义组件时,投影内容不会显示.

用法看起来与Angular Material API非常相似:

<custom-tabs>
  <custom-tab [label]="labelA">Content A</custom-tab>
  <custom-tab [label]="labelB">Content B</custom-tab>
  <custom-tab [label]="labelC">Content C</custom-tab>
</custom-tabs>

自定义组件尝试按如下方式投影内容:

<!-- custom-tabs template -->
<mat-tab-group>
  <ng-content></ng-content>
</mat-tab-group>

<!-- custom-tab template -->
<mat-tab [label]="label">
  <ng-content></ng-content>
</mat-tab>

有谁知道我们如何让它运作？

我提供了一个StackBlitz,您可以在其中查看问题.

我们有一些数组，例如：

• heroes: Hero[];
• villains: Villain[];
• ...
• puppies: Puppy[]

和一个模板

<p *ngFor="let individual of heroes">
    {{ individual.name }} - {{ individual.mobileNumber }}
    ...
</p>
    <p *ngFor="let individual of villains">
    {{ individual.name }} - {{ individual.mobileNumber }}
    ...
</p>
...
 <p *ngFor="let individual of puppies">
    {{ individual.name }} - {{ individual.mobileNumber }}
    ...
</p>

该*ngFor回路均具有相同的内容。为了简化这一点，我们创建了一个ng-template我们可以重用的。

<ng-template let-individual #individualParagraphContent>
    {{ individual.name }} - {{ individual.mobileNumber }}
    ...
<ng-template>

现在我们想像这样使用它：

<p *ngFor="let individual of puppies">
  <ng-content *ngTemplateOutlet="individualParagraphContent;
              context: {individual: individual}"> …

我成功地<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() { …