[英]Javascript Angular 4 Change ngClass from another Component
I currently have this code in my app.component.ts 我目前在我的app.component.ts中有此代码
app.component.html app.component.html
<div [ngClass]="myclass">
...rest of the content here
</div>
This I have the this: 这我有这个:
<button (click)="changeClass('myFavClass')">Change Class to myFavClass</div>
app.component.ts app.component.ts
export class AppComponent {
myclass: string;
changeClass(myclass) {
this.myclass = myclass;
}
}
Now, all this works fine BUT I now want to put the triggering button on another component. 现在,所有这些工作正常,但是我现在想将触发按钮放在另一个组件上。
If I put this on another component: 如果我把它放在另一个组件上:
<button (click)="changeClass('myFavClass')">Change Class to myFavClass</div>
How can I get it to change the class? 我怎样才能改变班级?
There are two ways you can do this you can use output with an EventEmit 有两种方法可以将输出与EventEmit一起使用
Or you can set up a service that monitors the changes to a variable and use that as the control point for the change. 或者,您可以设置服务来监视变量的更改,并将其用作更改的控制点。
Personally, I use services for this instance as its easier to manage the code and its flow. 就个人而言,我将服务用于此实例,因为它更易于管理代码及其流程。
This answer has all the code in you need to look at. 该答案包含您需要查看的所有代码。
Changing a value in two different components at the same time Angular 2 同时更改两个不同组件中的值Angular 2
Hope that helps 希望能有所帮助
There are at least two options. 至少有两个选择。
Subject and Observable
or if this another
component is a parent you can use @Input
. Subject and Observable
或者如果该another
组件是父组件,则可以使用@Input
。
Subject and Observable
method: Subject and Observable
方法:
angular guide Highly recommended to read whole page. 角度指南强烈建议阅读整页。
Some component 一些组成部分
export class SomeComponent {
constructor(private ClassService: ClassService) { }
private changeClass(class) {
this.ClassService.changeClass(class);
}
}
Another Component 另一个组成部分
export class AnotherComponent implements OnInit, OnDestroy {
constructor(private ClassService: ClassService) { }
private class: string = "";
private subscribtion: Subscribtion;
ngOnInit(): void {
this.Subscribtion = this.ClassService.someClass$.subscribe(
(class) => { this.class = class; }
)
}
ngOnDestroy(): void {
this.Subscribtion.unsubscribe();
}
}
Service 服务
@Injectable();
export class ClassService{
constructor() { }
private someClassSource= new Subject<string>();
someClass$= this.someClassSource.asObservable();
changeClass(class) {
this.someClassSource.next(class);
}
}
@Input
method: @Input
法:
This is very simple, when you click button changeClass
method will change elClass
which will be passed to another component
by @Input
decorator, every change of @Input
will cause a detect changes which will detect that value has changed so class will change to myClass
. 这非常简单,当您单击按钮
changeClass
方法将更改elClass
, elClass
将通过@Input
装饰器传递给another component
, @Input
每次更改@Input
将导致检测更改,该更改将检测到该值已更改,因此class将更改为myClass
。
Parent component 父组件
parent.component.html
<another-component [elementClass]="elClass"></another-component>
<button (click)="changeClass('myClass')">change class<button>
parent.component.ts
export class ParentComponnet {
private elClass: string = "";
changeClass(class: string) {
elClass = class;
}
}
Another component (must be child component) 另一个组件(必须是子组件)
another.component.html
<div [ngClass]="elementClass">
another.component.ts
export class AnotherComponent {
@Input() elementClass: string;
}
There is also Child to Parent interaction via @Output
(emitting event) angular guide 还可以通过
@Output
(发射事件) 角度向导进行子对父交互
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.