Question

当某个父类组件/元素中存在某个类时，我希望Angular组件的内容发生变化。与:host-context() CSS选择器非常相似，但是在TypeScript组件代码中。

使用:host-context(.the-class)，我可以控制组件中元素的可见性，但这只会修改组件的样式。我也想修改行为。

我还尝试了$(this.element.nativeElement).parents().hasClass("the-class");的JQuery路由。这相当有效，但是我更喜欢声明性/角度的方法。

@Component({
  template: `
    <p>{{text}}</p>
  `,
  styles: [`
    :host-context(.the-class) p {
      color: red;
    }
  `]
})
class MyComponent {
  text: string;

  /*
    Change content of 'text' if 'the-class' can be found
    in any of the parents here somewhere.
  */
}

那么...在没有求助于JQuery或本机DOM选择器的情况下，实现这种“角度方式”的最佳方法是什么？我意识到这可能不是一个常见的用例，因为它会破坏组件的隔离等等。但是我认为，由于:host-context选择器用于样式设置，因此控制器必须有类似的东西。

Answer 1

也许您可以阅读子组件中的父样式表，这样很容易找到类。

对于Exp;

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss', '../parent.component.scss']
})

此处的样式URL angular允许添加多个样式表，因此您可以在此处添加父样式，然后可以使用js方法查找类document.getElementsByClassName(names);

Answer 2

您可以在Angular中很好地做到这一点。

首先，您可以声明一个变量来获取相关的类，例如

const classname = document.querySelector('the-class') as HTMLElement;
let container = classname.parentNode;
console.log(container)  // You can console log this to see the parent class for yourself

有了它，您应该可以做任何您想做的事。

假设您的课程是输入或与之相关的任何元素，您还可以在Angular组件中做类似的事情

const classname = document.querySelector('the-class') as HTMLElement;
classname.onClick = () => {
let container = classname.parentNode;
console.log(container)  // You can console log this to see the parent class
let container = classname.parentNode;    
}

如何检测父元素/组件的类

2 个答案: