angularjs – Angular2：用组件的模板替换主机元素

发布时间：2020-12-17 08:10:54 所属栏目：安全来源：网络整理

导读：我是新来的一般角度，特别是角度2。我试图写一个容器组件，它应该有子组件。例如，容器组件： @Component({ selector: 'my-list',template: ` ul ng-content/ng-content /ul `})export class MyList {} 子组件： import { Component } from 'angular2/core'

我是新来的一般角度，特别是角度2。我试图写一个容器组件，它应该有子组件。

例如，容器组件：

@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

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

最后我找到解决方案：将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>
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!