Question

我正在尝试将angularJs 1.6的这个组件转换为角度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

require中没有angular，但您可以将父组件注入您的子组件。如果子组件不在父组件内，则应用程序将抛出错误：

@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) {}

}

转换并要求Angular4

1 个答案: