Question

我使用Angular 5.0基于Semantic UI创建组件库。我目前一直在试图找出如何从包含在其父级中的子组件中删除一个类，并且实际上可能根本不存在。

问题源于语义UI创建标记图标按钮的方式。普通图标按钮将具有以下HTML：

<div class="ui icon button" tabindex="0"><i class="flag icon"></i> Flag</div>

在我的图书馆中，这是使用：

<div sui-button icon="flag">Flag</div>

但是，带标签的图标按钮通常是：

<div class="ui labeled button" tabindex="0">
  <div class="ui button"><i class="flag icon"></i> Flag<div>
  <a class="ui basic label">Test</a>
</div>

如果我是通过我的图书馆创建这个，那么子按钮也会有＆＃34;图标＆＃34;导致CSS中断的类。

<div sui-button class="labeled">
  <div sui-button icon="flag">Flag</div>
  <a sui-label class="basic">Test</a>
</div>

在我的组件中，我尝试了以下测试来检查其父级内的子按钮：

export class SemanticButtonComponent implements OnInit, AfterViewComponent {
  @Input('icon') icon: string = "";
  @Input('flag') flag: string = "";
  @ViewChild(SemanticButtonComponent) childButton: SemanticButtonComponent;

  constructor(private el:ElementRef, private renderer: Renderer2) { }

  ngOnInit() {
    if ("" !== this.icon || "" !== this.flag) {
      this.renderer.addClass(this.el.nativeElement, 'icon')
    }
  }

  ngAfterViewInit() {
    console.log(this.childButton);
  }
}

不幸的是，这只是输出＆＃34; undefined＆＃34;对于这两个实例。是不是找不到它，因为组件被转换了？有没有什么方法可以引用子按钮而不包含在模板中？

通过转换从子组件中删除类

0 个答案: