加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

扩展Angular Material2 MdTab组件

发布时间:2020-12-17 06:59:22 所属栏目:安全 来源:网络整理
导读:我正在尝试扩展其中一个Material组件MdTabGroup.使用开箱即用的MdTabGroup组件一切正常 – 材料库正确导入模块等. 这是扩展组件: @Component({ selector: 'md-custom-tab-group',templateUrl: 'custom-tab-group.html',....})export class MdCustomTabGroup
我正在尝试扩展其中一个Material组件MdTabGroup.使用开箱即用的MdTabGroup组件一切正常 – 材料库正确导入模块等.

这是扩展组件:

@Component({
    selector: 'md-custom-tab-group',templateUrl: 'custom-tab-group.html',....
})
export class MdCustomTabGroup extends MdTabGroup {
  constructor( private _r : Renderer) {
    super(_r);
  }
}

新组件在app模块中导入并声明,因此创建:

<md-custom-tab-group>
    <md-tab>one</md-tab>
    <md-tab>two</md-tab>
</md-custom-tab-group>

自定义标签组(custom-tab-group.html)的模板与材质中的模板相同,例如

<div class="mat-tab-body-wrapper" #tabBodyWrapper>
    <md-tab-body role="tabpanel"
                 *ngFor="let tab of _tabs; let i = index"
                 ...
                 [content]="tab.content"
                 ...>
    </md-tab-body>
</div>

运行时,_tabs ViewChildren集合正在被正确填充 – 它由原始标记中的md-tab声明组成,被解释为Material选项卡组件.但是,custom-tab-group.html模板无效.模板解析器现在不知道’md-tab-body’是什么.

具体 –

Can’t bind to ‘content’ since it isn’t a known property of ‘md-tab-body’.

但是当我拿起新模板时,我认为它根本不知道md-tab-body是什么.

问题是 – 如何纠正此行为并使扩展组件正常工作?

解决方法

不是一个好的答案,但正在跟踪的这个问题似乎是它的根源.

https://github.com/angular/material2/issues/9216

一旦它们在导出列表中包含MatTabBody,MatTabHeader和MatTabLabelWrapper,您就应该能够扩展它.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读