Question

我正在尝试使用Angular 5中的ng-content。

import { Component, Injectable } from '@angular/core';

@Injectable()
@Component({
 selector: 'my-component',
 template: '<ng-content></ng-content>',
})
export class PrintComponent {
  data = 'test'
}

并使用它：

<my-component>
  {{data}}
</my-component>

如何以类似的方式访问data？

Answer 1

做这样的事情。

import { Component } from '@angular/core';

/**
 * Component class to represent side pane.
 * @class SidePaneComponent
 */
@Component({
  selector: 'app-side-pane',
  styleUrls: ['./side-pane.component.scss'],
  templateUrl: './side-pane.component.html'
})
export class SidePaneComponent {
}

侧面pane.component.html

<ng-content select=".right-pane"></ng-content>

您可以像这样使用app-side-pane组件。

  <app-side-pane>
    <div class="right-pane">
     // your content goes here.
    </div>
  </app-side-pane>

只需记住在使用组件的任何地方添加类右窗格。这被称为角度内容投影。您可以在here中找到更多详细信息。

Answer 2

经过一些试验和错误，我发现了一个hacky解决方案。

组件：

import { Component, DoCheck, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'dynamic-tempate',
  template: '<ng-content></ng-content>'
})
export class DynamicComponent implements DoCheck {
  data = 'done'
  @Output() get = new EventEmitter()

  ngDoCheck() {
      this.get.emit(this.data)
  }
}

用法：

<dynamic-template (get)='data = $event'>
  and the hack is {{data}}
</dynamic-tempate>

Angular ng-content使用组件数据

2 个答案: