圆形依赖警告角5

Question

我正在努力解决循环依赖警告时，构建一个角5应用程序。

我读过这两个问题：first和second，但无法解决我的代码中的问题和如何解决它。

以下是警告：

WARNING in Circular dependency detected:
src\pages\addresses\add-address\add-address.component.ngfactory.js -> src\pages\nav-bar\nav-bar.component.ngfactory.js -> src\pages\cart-panel\cart-panel.component.ngfactory.js -> src\pages\addresses\add-address\add-address.component.ngfactory.js

我正在使用服务提供者作为其他组件正在使用的服务。

add-address.component.ts

import { ServiceProvider} from '../../../providers/service-provider';
import { AlertService } from '../../../providers/alert-provider';

nav-bar.component.ts

import { ServiceProvider} from '../../providers/service-provider';
import { AlertService } from '../../providers/alert-provider';

cart-panel-component.ts

import { ServiceProvider} from '../../providers/service-provider';

Answer 1

<add-address></add-address>组件内部html使用<nav-bar></nav-bar>，内部html使用组件<cart-panel></cart-panel>，组件内html使用<add-address></add-address>，这将导致循环，因此循环永远不会关闭，因此从cart面板中移除address标记，代码将编译。

示例呈现角HTML:

   <add-address>
     <nav-bar>
       <cart-panel>
        <!-- cause circle -->
        <add-address><!-- remove this in the add-address component -->
          <!-- add-address > nav-bar > cart-panel > add-address..... -->
        </add-address>
       </cart-panel>
     </nav-bar>
   </add-address>