Angular 2+ 添加或删除属于另一个组件的元素的类

用户8770372

我在有 2 个组件的应用程序上使用 Angular 4 ... app.component 和 other.component

app.component.html 上,我有一个名为myClass的类的 div ...

<div class="myClass"></div>

other.component.ts我目前有:

ngOnInit() {

 jQuery('.myClass').removeClass();
 jQuery('.myClass').addClass('someClassName');

}

我想以角度方式而不是使用 jQuery 来执行此操作。

我的问题是......我如何用 Angular 2+ 做同样的事情?

用户4676340

如果OtherComponent在另一条路线上AppComponent,那么您可以使用服务来做到这一点:

应用程序组件.html

<div class="myClass" #concernedDiv></div>

app.component.ts

@ViewChild('concernedDiv') concernedDiv: ElementRef;

constructor(private myService; MyService) {}

ngOnInit() {
  this.myService.onOtherInit.subscribe(event => {
    this.concernedDiv.className = this.concernedDiv.replace('myClass', '').trim();
  });
}

我的服务.service.ts

private sub: Subject<any> = new Subject();
public onOtherInit: Observable<any> = this.sub.asObservable();

emitEvent() { this.sub.next(/* anything you want */); }

other.component.ts

constructor(private myService: MyService) {}
ngOnInit() { this.myService.emitEvent(); }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将数据从一个组件传递到另一个 Angular 2

Angular 2在另一个组件上更改组件变量

如何在Angular 2中将组件导入另一个根组件

Angular2在另一个组件内部动态替换组件

另一个组件内部的Angular2参考组件

Angular 2+:将组件用作另一个组件中的输入

Angular 2-无法在组件声明中导入另一个组件

Angular 2从组件到服务再返回到另一个组件共享数据

Angular 2+:检查dom元素是否是另一个dom元素的子元素

Angular 2,Cant能够从另一个组件访问一个组件中的变量

如何在Angular2的另一个组件中放置一个组件?

Angular 2:在另一个组件上定义一个路由器,而不是引导的组件

如何在Angular 2中从一个组件调用方法到另一个组件?

Angular2如何在另一个组件中使用一个组件功能

如何从另一个组件调用一个组件中的方法是 angular2

如何动态地在另一个组件中显示一个组件 Angular2

Angular 2 将变量从一个组件传递到另一个组件

在Angular2中设置元素距另一个元素的高度

如何在angular2中调用另一个组件函数

Angular 2将@Component插入另一个组件的DOM中

Angular 2将表单数据传递到另一个组件

Angular2 如何从另一个组件调用单击事件的函数

Angular 2 子路由模块显示正确的 url 但显示另一个组件

Angular2/4 从另一个组件获取数据

如何在Angular2中的另一个组件中使用变量

在 angular 2 的另一个组件中使用复杂类型对象

将数据从同级组件传递到另一个 Angular 2

路由到另一个组件时出现Angular 2错误

Angular 2 CanActivate 作为承诺,从另一个组件解析