33

我是angular一般和angular2特别的新手。我正在尝试编写一个容器组件，其中应该有子组件。

例如，容器组件：

@Component({
  selector: 'my-list',
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `
})
export class MyList {
}

子组件：

import { Component } from 'angular2/core'

@Component({
  selector: 'my-item',
  template: `
    <li>
      <ng-content></ng-content>
    </li>
  `
})
export class MyItem {
}

我想做这个结构：

<my-list>
    <my-item>One</my-item>
    <my-item>Two</my-item>
</my-list>

呈现为以下之一：

<my-list>
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
</my-list>

但相反，我保留了容器的宿主元素和项目：

<my-list>
    <ul>
        <my-item>
            <li>One</li>
        </my-item>
        <my-item>
            <li>Two</li>
        </my-item>
    </ul>
 </my-list>

Plunk 可在此处获得

问题：有没有办法消除宿主元素并只留下渲染的模板？

4

4 回答 4

22

这你应该得到你想要的：

@Component({
  selector: 'ul[my-list]',
  template: `
    <ng-content></ng-content>
  `
})
export class MyList {
}

@Component({
  selector: 'li[my-item]',
  template: `
    <ng-content></ng-content>
  `
})
export class MyItem {
...
}

<ul my-list>
    <li my-item>One</li my-item>
    <li my-item>Two</li my-item>
</ul my-list>
于 2016-03-01T21:21:37.400 回答
13

最后我找到了解决方案：注入ElementRef并MyItem使用它nativeElement.innerHTML：

我的清单：

import { Component, ContentChildren, QueryList } from 'angular2/core'
import { MyItem } from './myitem'

@Component({
  selector: 'my-list',
  template: `
    <ul>
      <li *ngFor="#item of items" [innerHTML]="item.innerHTML"></li>
    </ul>
  `
})
export class MyList {
  @ContentChildren(MyItem) items: QueryList<MyItem>
}

我的项目：

import { Directive, Inject, ElementRef } from 'angular2/core'

@Directive({selector: 'my-item'})
export class MyItem {
  constructor(@Inject(ElementRef) element: ElementRef) {
    this.innerHTML = element.nativeElement.innerHTML
  }
}

工作笨拙在这里

于 2016-03-03T05:39:05.363 回答
3

新的 Angular 版本具有非常酷的指令，也可以用于您的用例。多田：NgComponentOutlet。快乐编码；）

例子：

@Component({selector: 'hello-world', template: 'Hello World!'})
class HelloWorld {
}

@Component({
  selector: 'ng-component-outlet-simple-example',
  template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`
})
class NgTemplateOutletSimpleExample {
  // This field is necessary to expose HelloWorld to the template.
  HelloWorld = HelloWorld;
}
于 2017-12-19T11:04:33.177 回答
-2

在最新的角度你甚至可以避免添加<ng-content></ng-content>

我申请的是这样的：

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

@Component({
    selector: 'div[app-root]',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})
export class AppComponent {
    title = 'Delegates Presence Reporting';
}

和模板：

<div class="centered">
<h1>{{title}}</h1>
</div>

索引.html

<body>
<div app-root></div>
</body>
于 2018-03-07T10:44:37.797 回答