Javascript Angular 2-注入由HTML选择器创建的组件

我试图访问一个组件，该组件是在一些HTML中使用选择器创建的。我的印象是（似乎是错误的）提供者会寻找一个现有实例，并在注入另一个组件时提供该实例，但显然我误解了分层提供者的创建过程

在下面，我有一个组件，它在其HTML模板中使用选择器来创建TopLevelComponent的实例

imports ...

    @Injectable()
    export class MyEmpService {
        getAllEmployees() {
            // hit database
            // return employee list
        }
        getEmp(id: number) {
            // hit database
            // return employee data 
        }
}

我试图通过创建一个提供者并使用DI将该实例推送到构造函数来访问TopLevelComponent

（如果这段代码不完美，我表示歉意，我刚刚列出了一个简单的示例。）

@组件({
选择器：“我的应用程序”，
模板：“”，
指令：[TopLevelComponent]，
提供者：[TopLevelComponent]，
})
导出类MyApp{
构造函数（私有topLevelComponent:topLevelComponent）{
}
}
@组成部分({
选择器：“顶级组件”，
模板：“”，
})
导出类TopLevelComponent{
构造函数（）{
log（'构造了一个TopLevelComponent…'）；
}
}

但是，我没有将TopLevelComponent的一个实例传递给我的组件，而是得到了两个实例（调试日志中出现的两个“CONSTRUCTED A TopLevelComponent…”日志证明了这一点）

如果我从构造函数中删除“private-topLevelComponent:topLevelComponent”，我只会得到该组件的一个实例，但我似乎无法得到它

所以我有两个问题

• 如何使用DI将选择器创建的组件的实例传递给其他组件的构造函数

或

• 如果我没有在应用程序HTML中包含
  ，如何将该HTML注入应用程序中，使其正确呈现

还有第三个

• 如果上述两种方法都可行，建议采用哪种方法

---

我认为@ViewChild是正确的方法，因为这个组件只有一个实例（！），但是由于它被注入了许多不同的组件中，我认为这是不可能的。

如果您将一个组件添加到

提供者：[……]

中，那么该组件将被视为一个普通类。如果DI在请求

TopLevelComponent

时找到这样一个提供程序，它将创建组件类

@component（…）的实例
decorator将被忽略

如果组件列在
指令中：[……]
DI将发现它们是组件和指令，如果它们是由于匹配的选择器而被实例化的

更新

  <component-to-inject #source></component-to-inject>
  <component-to-receive [injectedComponent]="source"></component-to-receive>

如果将组件添加到
提供程序：[……]
中，则该组件将被视为普通类。如果DI在请求
TopLevelComponent
时找到这样一个提供程序，它将创建组件类
@component（…）的实例
decorator将被忽略

如果组件列在
指令中：[……]
DI将发现它们是组件和指令，如果它们是由于匹配的选择器而被实例化的

更新

  <component-to-inject #source></component-to-inject>
  <component-to-receive [injectedComponent]="source"></component-to-receive>

angular2通过提供者中的服务列表。服务是可重用的代码段

可以在任何指令/组件中使用的基本服务示例

imports ...

    @Injectable()
    export class MyEmpService {
        getAllEmployees() {
            // hit database
            // return employee list
        }
        getEmp(id: number) {
            // hit database
            // return employee data 
        }
}

组件是带有视图的指令。Angular2在指令中传递组件列表。列表中的任何组件都可以在组件中使用。同样，它是可重用的代码，但具有视图。
简单的例子：
EmployeeComponent.ts

imports...

@Component({
    selector: 'my-emp',
    template: `
        <button (click)="getEmpList()">Get All Emp</button>
        <button (click)="getEmp(2)">Get Emp</button>
        <div>
            {{result | json}}
        </div>
    `,
    providers: [MyEmpService]
})

export class EmployeeComponent{
    private result:any = '';
    constructor(private myEmpService: MyEmpService) { }

    getEmpList(){
        this.result = myEmpService.getAllEmployees();
    }
    getEmp(id: number){
        this.result = myEmpService.getEmp(id);
    }
}

imports...

@Component({
    selector: 'my-app',
    template: `
        <h1>Main Component</h1>
        <my-emp></my-emp>
    `,
    directives: [EmployeeComponent]
})

export class AppComponent{ }

导入。。。
@组成部分({
选择器：“我的emp”，
模板：`
获取所有Emp
得到电磁脉冲
{{result}json}
`,
提供者：[MyEmpService]
})
导出类EmployeeComponent{
私有结果：any=''；
构造函数（私有myEmpService:myEmpService）{}
getEmpList（）{
this.result=myEmpService.getAllEmployees（）；
}
getEmp（id:number）{
this.result=myEmpService.getEmp（id）；
}
}

AppComponent.ts

imports...

@Component({
    selector: 'my-emp',
    template: `
        <button (click)="getEmpList()">Get All Emp</button>
        <button (click)="getEmp(2)">Get Emp</button>
        <div>
            {{result | json}}
        </div>
    `,
    providers: [MyEmpService]
})

export class EmployeeComponent{
    private result:any = '';
    constructor(private myEmpService: MyEmpService) { }

    getEmpList(){
        this.result = myEmpService.getAllEmployees();
    }
    getEmp(id: number){
        this.result = myEmpService.getEmp(id);
    }
}

imports...

@Component({
    selector: 'my-app',
    template: `
        <h1>Main Component</h1>
        <my-emp></my-emp>
    `,
    directives: [EmployeeComponent]
})

export class AppComponent{ }

导入。。。
@组成部分({
选择器：“我的应用程序”，
模板：`
主要成分
`,
指令：[员工组成部分]
})
导出类AppComponent{}
angular2通过提供商的服务列表。服务是可重用的代码段

可以在任何指令/组件中使用的基本服务示例

imports ...

    @Injectable()
    export class MyEmpService {
        getAllEmployees() {
            // hit database
            // return employee list
        }
        getEmp(id: number) {
            // hit database
            // return employee data 
        }
}

组件是带有视图的指令。Angular2在指令中传递组件列表。列表中的任何组件都可以在组件中使用。同样，它是可重用的代码，但具有视图。
简单的例子：
EmployeeComponent.ts

imports...

@Component({
    selector: 'my-emp',
    template: `
        <button (click)="getEmpList()">Get All Emp</button>
        <button (click)="getEmp(2)">Get Emp</button>
        <div>
            {{result | json}}
        </div>
    `,
    providers: [MyEmpService]
})

export class EmployeeComponent{
    private result:any = '';
    constructor(private myEmpService: MyEmpService) { }

    getEmpList(){
        this.result = myEmpService.getAllEmployees();
    }
    getEmp(id: number){
        this.result = myEmpService.getEmp(id);
    }
}

imports...

@Component({
    selector: 'my-app',
    template: `
        <h1>Main Component</h1>
        <my-emp></my-emp>
    `,
    directives: [EmployeeComponent]
})

export class AppComponent{ }

导入。。。
@组成部分({
选择器：“我的emp”，
模板：`
获取所有Emp
得到电磁脉冲
{{result}json}
`,
提供者：[MyEmpService]
})
导出类EmployeeComponent{
私有结果：any=''；
构造函数（私有myEmpService:myEmpService）{}
getEmpList（）{
this.result=myEmpService.getAllEmployees（）；
}
getEmp（id:number）{
this.result=myEmpService.getEmp（id）；
}
}

AppComponent.ts

imports...

@Component({
    selector: 'my-emp',
    template: `
        <button (click)="getEmpList()">Get All Emp</button>
        <button (click)="getEmp(2)">Get Emp</button>
        <div>
            {{result | json}}
        </div>
    `,
    providers: [MyEmpService]
})

export class EmployeeComponent{
    private result:any = '';
    constructor(private myEmpService: MyEmpService) { }

    getEmpList(){
        this.result = myEmpService.getAllEmployees();
    }
    getEmp(id: number){
        this.result = myEmpService.getEmp(id);
    }
}

imports...

@Component({
    selector: 'my-app',
    template: `
        <h1>Main Component</h1>
        <my-emp></my-emp>
    `,
    directives: [EmployeeComponent]
})

export class AppComponent{ }

导入。。。
@组成部分({
选择器：“我的应用程序”，
模板：`
主要成分
`,
指令：[员工组成部分]
})
导出类AppComponent{}
为了获得对模板中存在的组件的引用，可以使用@ViewChild注释

@ViewChild(TopLevelComponent)
private myTopLevelComponent:TopLevelComponent

@ViewChildren(TopLevelComponent)
private topLevelComponents:QueryList<TopLevelComponent>

这将为您提供在相应模板中找到的TopLevelComponent的第一个实例

如果有多个相同类型的组件，但希望找到某个组件，则可以使用局部模板变量

@ViewChild('templateVariableName')
private myTopLevelComponent:TopLevelComponent

您的html模板需要如下所示：

<top-level-component #templateVariableName></top-level-component>



最后：
如果要查找相同类型的所有组件，可以使用@ViewChildren注释

@ViewChild(TopLevelComponent)
private myTopLevelComponent:TopLevelComponent

@ViewChildren(TopLevelComponent)
private topLevelComponents:QueryList<TopLevelComponent>

@ViewChildren（TopLevelComponent）
私有topLevelComponents:QueryList

这将为您提供所有TopLevelComponents的列表