Question

我想在组件和其中一个孩子之间创建一个共享服务（我有一个项目有几个笔记，并且想要更新笔记）

所以，在组件＆＃34; A＆＃34;我做了以下

import {SharedService} from "../services/my.shared.service";
...
@Component({
  selector: 'foo',
  templateUrl: './foo.html',
  styleUrls: ['./foo.scss'],
  providers: [SharedService]
})
...
constructor(private _sharedService:sharedService) { }
...

我在这个组件中有一个路径

this._router.navigate(['./bar'],{relativeTo: this._route});

我的路线定义如下

{
        path: 'foo/:id',
        component: FooComponent,

        children: [
          {
            path: 'bar',
            component: BarComponent
          }

        ]
      },

所以，＆＃34; Bar＆＃34;组件

import { Component, OnInit } from '@angular/core';
import {SharedService} from "../services/my.shared.service";

@Component({
  selector: 'bar',
  templateUrl: './bar.html',
  styleUrls: ['./bar.scss']
})
export class BarComponent implements OnInit {

  constructor(private _sharedService:sharedService) { }

  async ngOnInit() {
    let item:any = await this._sharedService.getCurrentItem();
    console.log("xxxx",item)
  }

}

这都是编译。

然而，当我点击导航到bar的按钮时，我得到了

错误错误：未捕获（承诺）：错误：找不到主要插座加载＆＃39; BarComponent＆＃39;

现在，我知道这是因为我的Foo模板没有<router-outlet>。这是有原因的 - 我希望bar模板在可视化时替换foo模板。

我确实尝试设置这条路线

{
    path: 'foo/:id',
    component: FooComponent
},
{
    path: 'foo/:id/bar',
    component: BarComponent
 }

然后我收到错误

错误错误：未捕获（承诺）：错误：没有提供商 SharedService！

那么，我该如何

A）用子栏模板替换我的foo模板 B）修复提供程序错误？

ng2 / 4，路由器和插座的新手，所以我可能会遗漏一些基本的东西

更新＃1 我曾想过将<router-outlet>放入foo模板，并使用＆＃34; * ngIf = inParentMode＆＃34;包装父模板。但这似乎非常＆＃34; hacky＆＃34;

Answer 1

我认为您必须下定决心 - 您提到FooComponent通过路由替换为BarComponent。这意味着FooComponent和BarComponen t是彼此的兄弟姐妹，您的路由应该类似于您的第二个路由示例：

{
    path: 'foo/:id',
    component: FooComponent
},
{
    path: 'foo/:id/bar',
    component: BarComponent
 }

但是，如果FooComponent和BarComponent是兄弟姐妹，那么您可以通过在一个服务器中声明一个提供程序来共享它们之间的服务 - 按照定义，在组件中声明提供程序时，您说要为该组件及其所有子项提供该提供程序的唯一实例。 FooComponent是BarComponent的兄弟，而不是其父（同样，基于您如何描述您的使用方案）。

在这种情况下，您有两个选择：

在一个组件中声明共享服务提供者，该组件实际上是FooComponent和BarComponent的父级（来自您的路由代码，可能是AppComponent），或者
在NgModule级别声明您的共享服务提供商 - 对于大多数情况，这通常是更好的方法（除非您明确地利用每个＆＃39;唯一实例组件＆＃39;能力）。

因此，从FooComponent中删除服务的提供者声明，并将其添加到声明这些组件的NgModule中（可能是AppModule）。

组件，共享服务和angular2中的子项

1 个答案: