How to access a component from different module in angular 2

Question

I am new to angular 2, so please excuse me if this question sounds trivial to you. I am creating a feature module in angular 2 and I will export all the components from this module. Main module can import it and add this module in import list. By doing so, all the "template" in main module can access feature module's component.

But what I want is: in one of the my main module's component, I want to refer feature module's component as ViewChild.

Answer 1

You need to import the component class with a TypeScript import like

import {MyComponent} from './my.component'

then you can use it in @ViewChild()

@ViewChild(MyComponent) myComponent:MyComponent;

Answer 2

@ViewChild can be used with a local id (prefixed by #), and you don't have to import the defining class. Of course you can't then type the variable comp as MyComponent .

In the template:

<my-component #myComponent></my-component>

In the javascript:

@ViewChild('myComponent') comp: any;

(Note the quote marks)

Alternatively
You can re-export a component from a feature module

// my.module.ts

import {MyComponent} from './my.component'

@NgModule({
  ...
})
export class MyModule {}
export {MyComponent} 

Then in the consuming component (where you want to use @ViewChild)

import {MyComponent} from '../common/my.module'

Now Typescript has a working reference to the class, but only the feature module needs to be referenced, not the individual component(s).

Answer 3

Please consider creating a shared module (feature) which will provide that component to both module. Please see official documents for structuring the app with shared module

Answer 4

ViewChild is a decorator that you use to query your template to get the child that was imported from your feature module. if you template is :

<div>
  <child></child>
</div>

by using @ViewChild you can get your child component reference

Answer 5

You can use service and EventEmitter for this.

import { Injectable, EventEmitter } from '@angular/core';


    @Injectable()
    export class MyService  {

        resultIdFound: EventEmitter<any> = new EventEmitter<any>();

        resultFound(resultId: string) {
            this.resultIdFound.emit(resultId)
        }
    }

Source component is:

import { Component, EventEmitter } from '@angular/core';
import { MyService } from './myservice';

    @Component({
    //..
    })
    export class SourceComponent implements OnInit {
        constructor(
            private router: Router,
            private myService: MyService) { }

        onResultFound(resultId: string): void {

            this.myService.roomSeached(this.selectedRoom.id)
        }
    }

and Target component is:

import { Component, EventEmitter,NgModule } from '@angular/core';
import { MyService } from './myService';

    @Component({
    //...
    })
    export class TargetComponent implements OnInit {
        constructor( 
            private myService: MyService
        ) {
           this.myService.resultIdFound.subscribe((result: any) => {
                 console.log(result)
            });

        }    
        //....    
    }