Angular 5：在模型之间检测到循环依赖答案

【问题标题】：Angular 5: Circular dependency detected between modelsAngular 5：在模型之间检测到循环依赖
【发布时间】：2018-09-17 08:32:58
【问题描述】：

我被这个错误困扰了几天，我不知道如何解决它。

我的应用中有 2 个模型：User 和 Team。

user.ts：

import { Team } from './team';

export class User {

id: string = null;
name: string = null;
email: string = null;
settings: any = {};

team: Team = null;

constructor(json?: Object){
    var defaultSettings = {};

    if(json){
        this.id = json['id'] || null;
        this.name = json['name'] || null;
        this.email = json['email'] || null;
        this.settings = json['settings'] || {};

        this.team = new Team(json['team']) || null;
    }
}

getSettings(){
    return  Object.assign(this.team.settings, this.settings);
}

team.ts

import { User } from './user';

export class Team {

id: string = null;
name: string = null;
settings: any = {};

users: User[] = [];

constructor(json?: any){
    if(json){
        this.id = json['id'] || null;
        this.name = json['name'] || null;
        this.settings = json['settings'] || {};

        if(json['users']) json['users'].forEach(user => this.users.push(new User(user)));
    }
}

}

当用户登录时，我得到了他与团队的信息。像这样，我可以直接从用户那里做user.getSettings()，并获得这些设置和团队的合并数组。

另一方面，当我展示一个团队时，它可以有一些用户。

但是，我收到了一个警告：

WARNING in Circular dependency detected: src/app/_models/user.ts -> src/app/_models/team.ts -> src/app/_models/user.ts

是否可以保留此逻辑并避免循环依赖警告？

非常感谢！

【问题讨论】：

您的问题的答案是“不，您不应该保持这种状态”。循环依赖意味着你有错误的设计，你需要修复它。从您提供的信息中我可以肯定地说。

标签： angular model warnings circular-dependency

【解决方案1】：

几天后，我终于创建了第三个模型“LoggedUser”，它扩展了我的“用户”模型，与“团队：团队" 属性：

user.ts：

export class User {

    id: string = null;
    name: string = null;
    email: string = null;
    settings: any = {};

    constructor(json?: Object){
        var defaultSettings = {};

        if(json){
            this.id = json['id'] || null;
            this.name = json['name'] || null;
            this.email = json['email'] || null;
            this.settings = json['settings'] || {};
        }
    }
}

team.ts：

import { User } from './user';

export class Team {

    id: string = null;
    name: string = null;
    settings: any = {};

    users: User[] = [];

    constructor(json?: any){
        if(json){
            this.id = json['id'] || null;
            this.name = json['name'] || null;
            this.settings = json['settings'] || {};

            if(json['users']) json['users'].forEach(user => this.users.push(new User(user)));
        }
    }
}

loggedUser.ts：

import { User } from './user';
import { Team } from './team';

export class LoggedUser extends User {

    team: Team = null;

    constructor(json?: Object) {
        super(json);

        this.team = new Team(json['team']) || null;
    }    

    getSettings(){
        return  Object.assign(this.team.settings, this.settings);
    }
}

【讨论】：

【解决方案2】：

是否可以保留此逻辑并避免循环依赖警告？

通过将其添加到您的 angular-cli.json 中，您可以摆脱警告。

    "defaults": {

    "build": {

        "showCircularDependencies": false 
    }
  }

【讨论】：

对不起，正确的答案是改变设计。作为想法，为什么不在 User 中用属性 teamId 替换属性 Team？