带有HTTP查询的Angular2动态组件加载器

我想通过HTTP GET在一个组件中加载数据，然后我需要在动态加载的子组件中使用此数据。带有HTTP查询的Angular2动态组件加载器

下面的代码：

ngOnInit(){ 
this.accountService.getPersonalInfo().subscribe(
     response => { 
      this.Account = response.json(); 

      this.dcl.loadIntoLocation(HeaderComponent, this.elementRef, 'header') 
       .then(compRef => { 
         compRef.instance.Account=this.Account; 
        } 
       ); 
     } 
     ); 
}

在子组件（HeaderComponent）我可以使用this.Account得到这个数据。有一个更好的方法吗？

来源

2016-04-22 Yaroslav Osetrov

您可以在祖先组件

@Component({ 
    selector: 'header-cmp', 
    ... 
}) 
class HeaderCmp { 
    constructor(private account:AccountService) { 
    this.account.someObservable.subscribe(...); // or whatever 
    } 
} 

@Component({ 
    selector: 'parent-cmp', 
    providers: [AccountService], 
    ... 
}) 
class ParentCmp { 
    constructor(private account:AccountService) { 
    // set some values 
    } 
}

只是提供在您提供“服务”的组件可以是其中实际执行this.dcl.loadIntoLocation(...)组件或其他一些祖先组件进一步环比上涨。

来源

2016-04-22 16:27:04

但是，这将是两个类似的http查询 - 一个在父组件和其他孩子，对吧？我需要使用这两个组件中的数据（this.Account） –

Angulars DI为每个提供者维护一个实例。 'ParentCmp'将自己获得提供者的实例。对于'HeaderCmp'，DI将向上看，直到找到'AccountService'的提供者。如果你不在两者之间的任何地方添加它（只适用于'ParentCmp'和'HeaderCmp'不是直接的父子关系），那么DI将找到'ParentCmp'的提供者并将它传递给'HeaderCmp' 。通过这种方式，两个组件都获得对同一个'AccountService'实例的引用。 –

带有HTTP查询的Angular2动态组件加载器

回答

相关问题