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>

プランクはこちら

質問:ホスト要素を削除して、レンダリングされたテンプレートのみを残す方法はありますか?

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 に答える