javascript - 从 Angular 组件中的指定标签中获取内容

Question

是否有可能在 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>

?

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

希望对你有帮助