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

Question

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

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

我正在尝试通过创建提供程序并使用 DI 通过构造函数推送该实例来访问该 TopLevelComponent。

（抱歉，如果这段代码不完美，我只是整理了一个简单的例子。）

@component({
    selector: 'my-app',
    template: '<top-level-component></top-level-component>',

    directives: [TopLevelComponent],
    providers: [TopLevelComponent],
})
export class MyApp {

    constructor( private topLevelComponent: TopLevelComponent) {

    }
}

@component({
    selector: 'top-level-component',
    template: '',
})
export class TopLevelComponent {

    constructor() {
        console.log('CONSTRUCTED A TopLevelComponent...');
    }

}

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

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

所以我有两个问题

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

或

• 如果我没有在应用程序 HTML 中包含 <top-level-component></top-level-component>，我如何将该 HTML 注入应用程序以使其正确呈现？

第三个

• 如果以上两种方法都可以，推荐哪种方法？

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

Answer 1

如果您将组件添加到providers: [...]，则该组件将被视为普通类。如果 DI 在请求 TopLevelComponent 时找到这样的提供程序，它会创建组件类的实例 @Component(...) 装饰器被忽略。

如果一个组件在directives: [...] 中列出，如果它们因匹配选择器而被实例化，DI 会将它们视为组件和指令。

更新

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

与

export class ReceivingComponent { 

  @Input() injectedComponent: InjectingComponent;

  ngOnInit() {
    console.log(this.injectedComponent);
  }      
}

Answer 2

为了获得对模板中存在的组件的引用，您可以使用 @ViewChild 注释。

@ViewChild(TopLevelComponent)
private myTopLevelComponent:TopLevelComponent

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

如果您有多个相同类型的组件，但您想找到某个组件，您可以使用本地模板变量。

@ViewChild('templateVariableName')
private myTopLevelComponent:TopLevelComponent

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

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

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

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

这将为您提供模板中所有 TopLevelComponents 的列表。

为什么在您的示例中创建了两个实例？

使用 providers 数组并要求将该类注入到您的构造函数中，这会告诉 Angular 创建组件类的实例。 当 Angular 解析您的模板时，将创建第二个实例。

请注意，您通过构造函数注入的实例与模板中存在的实例不同。您对注入的实例所做的任何更改都不会反映在屏幕上。

要获得正确的实例，您需要按照我上面提供的步骤操作。

Answer 3

angular2 传递提供者中的服务列表。服务是可重用的代码sn-p。

可用于任何指令/组件的基本服务示例。

imports ...

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

Component 是一个带有视图的指令。 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);
    }
}

AppComponent.ts

imports...

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

export class AppComponent{ }