从角度组件中获取指定标签的内容

时间:2018-01-09 07:26:00

标签: javascript angular

角度2+组件是否有可能获得某些标签的内容?像这样的东西

import { Component } from '@angular/core';
@Component({
  selector: 'my-component',
  template: '<div>My component <p><ng-content from='forp'/></p><span><ng-content from='forspan'/></span></div>',
})
export class AppComponent {

}

然后我们写

    <my-component>
      <forp>Content for p-tag</forp>
      <forspan>Content for span-tag</forspan>
    </my-component>

它构建为

    <div>
      My component 
      <p>Content for p-tag</p>
      <span>Content for span-tag</span>
    </div>

1 个答案:

答案 0 :(得分:1)

是的,这是可能的。您可以创建一个组件并在使用组件时使用HTML:

<my-comp>
  <some-comp></some-comp>
  <some-other-comp></some-other-comp>
</my-comp>

MyComponent html将如下所示:

<div>
  // some html code
  <ng-content select="some-other-comp"></ng-content>
  <ng-content select="some-comp"></ng-content>
  // some html code
</div>

希望它会有所帮助