无法通过服务通过组件交互更新角度 4 中的视图

Question

您好，我正在尝试从组件（HeaderComponent）调用另一个组件（ProductComponent）的方法。为此，我使用了一项服务。我创建了一个服务 ProductService，它是这些组件之间的共享服务。但是当变量值在服务中更改时我不会更新视图请帮助。这是代码

productservice.service.ts

  import { Injectable, ChangeDetectorRef } from '@angular/core';
  import { Observable } from 'rxjs';
  import { Subject }    from 'rxjs/Subject';
  @Injectable()
  export class ProductServiceService {

    contentSource = new Subject();
    str = 'initial';
    content$ = this.contentSource.asObservable();
    constructor(private cdRef:ChangeDetectorRef) { }
    setData(str){
      this.str = str;
      console.log(str);
      this.cdRef.detectChanges();
    }
    getData(){
      return this.str;
    }

  }

header.component.ts

    @Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
  providers: [ProductsComponent, ProductServiceService],
  changeDetection: ChangeDetectionStrategy.Default
})
export class HeaderComponent implements OnInit{

 constructor(public dialog: MdDialog,private _http: Http,  private cdRef:ChangeDetectorRef, private sharedService: ProductServiceService) 
 {
}    
ngOnInit() {
}
    newProudutsData(slug: string){
    this.sharedService.contentSource.next("echo");
    this.sharedService.setData('Done Calling');
    this.cdRef.detectChanges();
    }
}

product.component.ts

@Component({
    selector: 'app-products',
    templateUrl: './products.component.html',
    styleUrls: ['./products.component.css'],
    changeDetection: ChangeDetectionStrategy.Default,
    providers: [ProductServiceService],
})
export class ProductsComponent implements OnDestroy {
    slug='';
    subscription: Subscription;
    testdata = 'abcd';
    constructor(private _http: Http, private sharedService: ProductServiceService) 
    {
            this.testdata = sharedService.getData();
            console.log("received222");
    }
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

页面加载时我得到的最终输出是初始的，但是当方法 调用 newProudutsData() 应将其更改为 Done Calling。

-----已编辑--------

product组件定义在header组件中，路由时调用prodcut组件

{
            path: 'products/:id',
            component: ProductsComponent
 },

被调用。

Answer 1

组件有自己的服务，它们没有连接。您应该将服务提取到模块。当您为组件指定服务时，您仅将其设置为该组件的本地服务，这意味着您有 2 个不同的服务实例而不是一个，并且它们彼此不共享数据。我建议在 chrome deb 工具中使用 augury 来查看依赖注入

  @Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit{

}

 @Component({
    selector: 'app-products',
    templateUrl: './products.component.html',
    styleUrls: ['./products.component.css'],
})
export class ProductsComponent implements OnDestroy {
}

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [ProductsComponent , HeaderComponent  ]
  providers: [
     ProductServiceService
  ]
})
export class YourModule {}

使用behaviorSubject代替主题

    contentSource = new BehaviorSubject('');

Subject 不会保存之前的值 BehaviorSubject 会。 如果 source 发出一些东西，但你当时没有订阅，你将失去这个值。

created Plunker