Angular中，非父子组件如何传参

最新推荐文章于 2024-01-10 12:03:30 发布

原创最新推荐文章于 2024-01-10 12:03:30 发布 · 291 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #前端 #javascript

当点击事件和WorkerOrderEditComponent不在同一文件时，可以创建Angular服务进行通信。通过定义Subject对象，点击事件触发时更新数据，WorkerOrderEditComponent订阅变化并更新视图。示例展示了如何创建服务、设置Subject、以及在组件中注入和使用服务来控制显示内容。

如果点击事件和WorkerOrderEditComponent不在同一个文件中，你可以使用Angular的服务来实现它们之间的通信。以下是一些示例代码，可以帮助你实现这个功能：

1. 创建一个新的Angular服务：

```
ng generate service step-service
```

2. 在这个服务中定义一个Subject对象，用于在点击事件和WorkerOrderEditComponent之间传递数据：

```
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class StepService {

private isDisplaySource = new Subject<boolean>();

isDisplay$ = this.isDisplaySource.asObservable();

setIsDisplay(value: boolean) {
this.isDisplaySource.next(value);
}

}
```

3. 在点击事件的组件中注入这个服务，并在点击事件中调用setIsDisplay函数来更新isDisplay的值：

```
import { Component } from '@angular/core';
import { StepService } from '../step.service';

@Component({
selector: 'app-click-component',
template: `
<button (click)="onClick()">Click me</button>
`,
})
export class ClickComponent {

constructor(private stepService: StepService) { }

onClick() {
this.stepService.setIsDisplay(true);
}

}
```

4. 在WorkerOrderEditComponent组件中注入这个服务，并订阅它的isDisplay$对象，以便在isDisplay值发生变化时更新step数组：

```
import { Component, OnInit } from '@angular/core';
import { StepService } from '../step.service';

@Component({
selector: 'app-worker-order-edit',
template: `
<div *ngFor="let step of stepList">
<h3>{{ step.title }}</h3>
<p>{{ step.content }}</p>
</div>
`,
})
export class WorkerOrderEditComponent implements OnInit {

stepList: Step[] = [];

constructor(private stepService: StepService) { }

ngOnInit() {
this.stepService.isDisplay$.subscribe(isDisplay => {
this.stepList = this.getStepList(isDisplay);
});
}

getStepList(isDisplay: boolean): Step[] {
const steps: Step[] = [];
steps.push({
title: 'Step 1',
content: 'This is step 1',
});
steps.push({
title: 'Step 2',
content: 'This is step 2',
});
if (isDisplay) {
steps.push({
title: 'Step 3',
content: 'This is step 3',
});
}
steps.push({
title: 'Step 4',
content: 'This is step 4',
});
return steps;
}

}
```

这样，当你在点击事件的组件中点击按钮时，就会调用StepService服务的setIsDisplay函数，并更新isDisplay的值。在WorkerOrderEditComponent组件中订阅这个服务的isDisplay$对象，并在isDisplay值发生变化时更新step数组。这样就可以实现这两个组件之间的通信了。