标签: angular2-ngcontent

给定以下组件（带有选择器my-template）：

<form #theForm="ngForm">
    <ng-content></ng-content>
</form>

并像这样使用它：

<my-template>
    <input type="text" required name="firstName" [(ngModel)]="firstName"/>
</my-template>

该表格始终有效-即使输入无效。当输入无效时，如何使表格无效？

现场演示：https : //plnkr.co/edit/lWUe6oeBk6ccsE2JxNKb?p=preview

我正在构建一个包含多个动态面板的页面,每个子面板都具有相同的HTML,因此我创建了一个父面板组件来包装每个面板组件.

问题是我想从孩子向小组发送一个事件,但我似乎无法找到答案.这是我到目前为止所拥有的:

// Panel Panel Component
@Component({
    selector: 'panel',
    template: `
    <div (emittedEvent)="func($event)">
        <ng-content></ng-content>
    </div>
    `
})
export class PanelComponent {

    constructor() {}

    func(event) {
    // Do stuff with the event
    }
}
// Child Panel Component (one of many)
@Component({
selector: 'child-panel-one',
template: `
    // Template stuff
    <button (click)="emitEvent()">Click</button>
`
})
export class ChildPanelOne {
emittedValue: Boolean = false;

@Output() emittedEvent = new EventEmitter();

constructor() {}

private emitEvent() {
    this.emittedValue = true;

    this.emittedEvent.emit(this.emittedValue)
}
}
//
// Main Parent …

我正在尝试分解弹出菜单，以便我可以这样写：

<panel-menu>
  <panel-menu-item>Edit input</panel-menu-item>
  <panel-menu-item>Edit mappings</panel-menu-item>
  <panel-menu-item divider-before>Show agent code</panel-menu-item>
</panel-menu>

我有一个panel-menu带有以下 HTML 的组件：

<div class="btn-group" [class.open]="...">
  <button type="button" class="btn btn-default" (click)="..."><i class="ion-gear-b icon-lg"></i></button>
  <ul class="dropdown-menu dropdown-menu-right">
    <ng-content select="panel-menu-item"></ng-content>
  </ul>
</div>

并panel-menu-item使用以下 HTML：

<li *ngIf="dividerBefore" class="divider"></li>
<li><a><ng-content></ng-content></a></li>

问题是生成的 DOM 在 和 之间有一个panel-menu-item，ul这li破坏了第三方 CSS。

是否有某种方法可以仅投影所选子项的内容，而不是子项本身？

这个答案建议使用属性而li不是组件，但这会泄漏实现。用户panel-menu不需要知道菜单项是作为哪些元素实现的。

我正在构建一个步进器并使用“嵌入”ng-content来动态抓取section步进器标签内的元素。stepper.component 视图的工作方式如下：

<ng-content select=".one"></ng-content>
<ng-content select=".two"></ng-content>
<ng-content select=".three"></ng-content>

组件用法如下所示：

<stepper>
    <section class="one">content here<section>
    <section class="two">content here<section>
    <section class="three">content here<section>
</stepper>

但是，我想通过自动识别部分元素来使其动态化：

<ng-content *ngFor="let section of sections; index as i;" select="['section:nth-child(' + i + ')']"></ng-content>

我怎样才能：

1. 获取可用于嵌入的节元素的节点列表？
2. 使用 ng-contentselect以增量方式定位它们？

我正在尝试使用引导程序创建一个选项卡组件。

<app-tabs>
  <app-tab [label]="'label1'">Description 1</app-tab>
  <app-tab [label]="'label2'">Description 2</app-tab>
</app-tabs>

我看过这篇文章：https : //juristr.com/blog/2016/02/learning-ng2-creating-tab-component/ 但我的用例不同。

我需要<ng-content>在 for 的每个循环中使用不同的。这是我的 plunker：https ://plnkr.co/edit/N2p8Vx ? p = preview 它在第二个选项卡中打印两个描述，将第一个留空。

感谢任何帮助！

我想弄清楚这 2 是做什么的，我有点困惑，它们是像 div 还是类似的东西？

我阅读了文档，但不清楚是的，而且我想知道我什么时候应该使用它们？还是为了什么？。

顺便说一句，我可以将 css 应用于他们两个吗？