我正在尝试将 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
。
这可能很容易,但我现在找不到解决方案。
最佳答案
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) {}
}
关于angularjs - Angular4 上的嵌入和要求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47309795/