Question

我是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 is available here

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

Answer 1

这应该得到你想要的东西：

@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>
</li my-list>

Answer 2

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

<强> MYLIST ：

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

<强> 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
  }
}

Working plunk is here

Answer 3

新的角度版本具有非常酷的指令，也可以用于您的用例。忠达：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;
}

Answer 4

有一个变通的解决方法，较旧的浏览器版本可能不支持，但是它在矿山项目中很有效，我认为如果没有更改或添加很多代码。

首先，您需要从元素选择器
更改 MyItem 类/组件的选择器

selector: 'custom-element-name'

到属性选择器

selector: '[customAttributeName]'

最后使用html slot元素将 MyItem 包装在 MyList html模板
中

<slot customAttributeName></slot>

完整代码：

import { Component } from 'angular2/core'

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


@Component({
  selector: '[myItemAsAtribute]',
  template: `
      <li *ngFor="let item of items">{{item}}</li>

  `
})
export class MyItem {
}

Answer 5

在最新的角度中，您甚至可以避免添加<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>

index.html

<body>
<div app-root></div>
</body>

Angular2：用组件模板替换host元素

5 个答案: