CODEWITHSUNDEEP
dependency-injectiontypescriptangular
Sergino
Sergino

Reputation: 10818

How to instantiate/inject class declared in main component to another component

My AppComponent sample:

   ///other imports here    
   import { ApplyColor } from './../../shared/directives/applycolor';
   import { SomeComponent} from './../../components/somecomponent';


    @Component({
        selector: 'my-app',
        directives: [ApplyColor, ROUTER_DIRECTIVES],
        providers: [ROUTER_PROVIDERS],
        templateUrl: 'myurl.html'
    })

    @RouteConfig([
      //routes here
      { path: '/main', name: 'Main', component: SomeComponent, useAsDefault: true },
    ])

    export class AppComponent {

    }

In order to instantiate ApplyColor in SomeComponent

Which is:

 import {Component, AfterViewInit, ViewChild} from 'angular2/core';
 import { ApplyColor  } from './../../shared/directives/applycolor';

@Component({
    selector: 'my-selector',
    directives: [ApplyColor],
    templateUrl: 'app/components/mycomponenturl.html'
})

export class MyComponent implements AfterViewInit {
    constructor() { }

    ngAfterViewInit() {
        var color = new ApplyColor();
        color.apply(2);
     }
}

How can I instantiate/inject ApplyColor without there 3 steps above?

Upvotes: 0

Views: 44

Answers (2)

Thierry Templier
Thierry Templier

Reputation: 202146

Directive instances are managed by Angular2. This means that you only need to specify it into the directives attribute. So if ApplyColor is a directive just add it into the directives attribute.

If ApplyColor isn't a directive, you can explicitly instantiate into the provide to the child component using @Input.

In your case, it's a bit particular since you leverage routing. In this case, you need to rely on a shared service. Such service needs to be defined when bootstrapping the application to be able to share a single instance for all components. You can set your instance of ApplyColor into a field of this service. So both component (AppComponent and SomeComponent) can access it.

  • Define the service

    export class SharedService {
  color:ApplyColor;
}

  • Bootstrapping the service

    bootstrap(AppComponent, [ SharedService ]);

  • Set color from AppComponent

    @Component({
  (...)
})
export class AppComponent {
  constructor(private service:SharedService) {
    var color = new ApplyColor();
    this.service.color = color;
  }
}

  • Get color from SomeComponent

    @Component({
  (...)
})
export class AppComponent {
  constructor(private service:SharedService) {
    this.service.color.apply(2);
  }
}

Upvotes: 1

jdeboer
jdeboer

Reputation: 31

I have just started working angular2 but as I can understand:

import ApplyColor => you can't remove that, it required by the compiler to know which class you are referenced to

directives : [ApplyColor] => that means you will use the selector (the one you have defined in applycolor.ts) in the template (app/components/mycomponenturl.html). it is only to know where the component will be in the view.

new ApplyColor => you are creating the object yourself, it is not injected. To inject your component, 

export class MyComponent implements AfterViewInit {
  constructor(private color:ApplyColor) { }

  ngAfterViewInit() {

    this.color.apply(2);
  }
}

I hope it helped you ?

Upvotes: 1

Related Questions