angularjs - Angular4 上的嵌入和要求

Question

我正在尝试将 angularJs 1.6 的这个组件转换为 angular 4，但找不到 require 和 transclude 的解决方案:

这里是 AngularJs 版本:

const partnerTabComponent = {
  selector: 'ypUiPartnerTab',
  controller : PartnerTabController,
  template,
  transclude: true,
  require: {
    parent: '^ypUiPartnerTabs'
  },
  bindings: {
    label: '<'
  }
}

这里是 Angular 版本:

@Component({
  selector: 'yp-ui-partner-tab',
  templateUrl: './partner-tab.component.html',
  styleUrls: ['./partner-tab.component.less']
})
export class PartnerTabComponent implements OnInit {

  @Input() label: any

  constructor() { }
}

我想在此 Angular 版本中添加 transclude 元素和 require。

这可能很容易，但我现在找不到解决方案。

Answer 1

angular 中没有require，但是您可以将父组件注入(inject)子组件。如果子组件不在父组件中，您的应用程序将抛出错误:

@Component({...})
export class PartnerTabComponent implements OnInit {

  constructor(private readonly partnerTabs: PartnerTabsComponent) {}

}

对于transclude位，我相信你可以使用ng-content标签:

如果你有这样的父组件模板:

<yp-ui-partner-tab>
  <div>this is sparta!</div>
</yp-ui-partner-tab>

您可以在 partner-tab 中放置 ng-content 标签的位置呈现您的“sparta”:

@Component({
  selector: 'yp-ui-partner-tab',
  template: `
      <div>What is this?</div>
      <ng-content></ng-content>
  `
})
export class PartnerTabComponent implements OnInit {

  constructor(private readonly partnerTabs: PartnerTabsComponent) {}

}