Angular Service组件间值传递异常问题求助

核心问题分析 #

你的代码存在两个关键问题导致传值失败：

1. 未将组件本地数据同步到Service：NomduprojetComponent的submit方法仅打印了本地formData的值，但从未调用setFormData将数据存入Service，导致Service中的nomduprojet始终保持初始空值。
2. Service冗余导入组件：RapportService中导入了NomduprojetComponent，这完全不必要，还可能引发循环依赖风险。

修正后的代码 #

1. 修正NomduprojetComponent

在提交时添加同步Service的逻辑，确保输入值存入Service：

import {Component} from '@angular/core';
import {RapportService} from '../rapport/rapport.service';

@Component({
    selector: 'app-nomduprojet',
    templateUrl: './nomduprojet.component.html',
    styleUrls: ['./nomduprojet.component.css']
})
export class NomduprojetComponent {
    formData: any = {
        nomduprojet: '' // 提供输入框默认值
    };
    
    constructor(private rapportService: RapportService) {} // 遵循小驼峰命名规范

    ngOnInit() {
        // 初始化时从Service同步数据到组件
        this.formData.nomduprojet = this.rapportService.getFormData();
    }

    submit() {
        console.log("formdata: " + this.formData.nomduprojet);
        // 提交时将本地数据同步到Service
        this.rapportService.setFormData(this.formData.nomduprojet);
    }
}

2. 修正RapportService

移除不必要的组件导入，保持Service的纯净性：

import {Injectable} from '@angular/core';
import{ HeadingLevel,Packer,Paragraph,TextRun,Document,Alignment,AlignmentType,UnderlineType } from "docx";

@Injectable({
    providedIn: 'root'
})
export class RapportService {
    formData: any = {
        nomduprojet: ''
    };

    setFormData(data: string) { // 明确参数类型，提升代码严谨性
        this.formData.nomduprojet = data;
    }

    getFormData(): string { // 明确返回值类型
        return this.formData.nomduprojet;
    }
}

3. 另一个组件的download方法（确保正确注入Service）

只需确保组件已正确注入RapportService即可，原有逻辑无需修改：

// 组件顶部导入Service
import { RapportService } from '../rapport/rapport.service';

// 构造函数中注入Service
constructor(private rapportService: RapportService) {}

public download(): void {
    const nomProjet = this.rapportService.getFormData();
    const doc = new Document({
        sections: [{
            properties: {},
            children: [
                new Paragraph({
                    text: "Promevent",
                    heading: HeadingLevel.TITLE,
                    alignment: AlignmentType.CENTER,
                }),
                new Paragraph({
                    text: "Chantier:" + nomProjet,
                    heading: HeadingLevel.TITLE,
                    alignment: AlignmentType.CENTER,
                }),
                new Paragraph({
                    children: [
                        new TextRun({
                            text: 'Date:...',
                            bold: true,
                        }),
                    ],
                }),
            ],
        }, ],
    });

    Packer.toBlob(doc).then((blob) => {
        console.log(blob);
        saveAs(blob, 'Promevent n°.docx');
        console.log('Document created successfully');
    });
}

额外优化建议 #

• 遵循Angular命名规范：服务实例使用小驼峰命名（如rapportService而非RapportService）
• 若需要实时响应数据变化，可改用BehaviorSubject实现组件间数据实时同步：

// RapportService中替换为BehaviorSubject
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RapportService {
    private nomDuProjetSubject = new BehaviorSubject<string>('');
    nomDuProjet$ = this.nomDuProjetSubject.asObservable();

    setNomDuProjet(data: string) {
        this.nomDuProjetSubject.next(data);
    }

    getNomDuProjet(): string {
        return this.nomDuProjetSubject.value;
    }
}

组件中订阅实时更新：

ngOnInit() {
    this.rapportService.nomDuProjet$.subscribe(value => {
        this.formData.nomduprojet = value;
    });
}

内容的提问来源于stack exchange，提问作者Abate Raphael