Fatal编程技术网
  • dependency-injection/
  • Dependency injection 如何将主组件中声明的类实例化/注入到另一个组件中

Dependency injection 如何将主组件中声明的类实例化/注入到另一个组件中

dependency-injection typescript angular

Dependency injection 如何将主组件中声明的类实例化/注入到另一个组件中,dependency-injection,typescript,angular,Dependency Injection,Typescript,Angular,我的AppComponent示例： ///other imports here import { ApplyColor } from './../../shared/directives/applycolor'; import { SomeComponent} from './../../components/somecomponent'; @Component({ selector: 'my-app', directives

我的AppComponent示例：

   ///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 {

    }
为了在
SomeComponent

  • 导入
    ApplyColor
  • 添加到
    指令：[ApplyColor]
  • 用
    new
    关键字实例化
即：

 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);
     }
}
如果没有上述3个步骤，我如何实例化/注入
ApplyColor
？

指令实例由Angular2管理。这意味着您只需要将其指定到
指令
属性中。因此，如果
ApplyColor
是一个指令，只需将其添加到
directives
属性中即可

如果
ApplyColor
不是一个指令，则可以使用
@Input
将其显式实例化到提供给子组件中

在您的情况下，这有点特殊，因为您利用了路由。在这种情况下，您需要依赖共享服务。在引导应用程序时需要定义这样的服务，以便能够为所有组件共享单个实例。您可以将
ApplyColor
的实例设置到此服务的字段中。因此组件（
AppComponent
和
SomeComponent
）都可以访问它

  • 定义服务

    export class SharedService {
  color:ApplyColor;
}

    bootstrap(AppComponent, [ SharedService ]);
  • 引导服务

    export class SharedService {
  color:ApplyColor;
}

    bootstrap(AppComponent, [ SharedService ]);
  • 从
    AppComponent

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

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

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

    @Component({
  (...)
})
export class AppComponent {
  constructor(private service:SharedService) {
    this.service.color.apply(2);
  }
}
指令实例由Angular2管理。这意味着您只需要将其指定到
指令
属性中。因此，如果
ApplyColor
是一个指令，只需将其添加到
directives
属性中即可

如果
ApplyColor
不是一个指令，则可以使用
@Input
将其显式实例化到提供给子组件中

在您的情况下，这有点特殊，因为您利用了路由。在这种情况下，您需要依赖共享服务。在引导应用程序时需要定义这样的服务，以便能够为所有组件共享单个实例。您可以将
ApplyColor
的实例设置到此服务的字段中。因此组件（
AppComponent
和
SomeComponent
）都可以访问它

  • 定义服务

    export class SharedService {
  color:ApplyColor;
}

    bootstrap(AppComponent, [ SharedService ]);
  • 引导服务

    export class SharedService {
  color:ApplyColor;
}

    bootstrap(AppComponent, [ SharedService ]);
  • 从
    AppComponent

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

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

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

    @Component({
  (...)
})
export class AppComponent {
  constructor(private service:SharedService) {
    this.service.color.apply(2);
  }
}
我刚开始学习angular2，但据我所知：

import ApplyColor=>您不能删除它，编译器需要知道引用了哪个类

指令：[ApplyColor]=>这意味着您将在模板（app/components/mycomponenturl.html）中使用选择器（您在ApplyColor.ts中定义的选择器）。只需知道组件在视图中的位置即可

new ApplyColor=>您正在自己创建对象，它不会被注入。 要注入组件

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

  ngAfterViewInit() {

    this.color.apply(2);
  }
}
我希望这对你有帮助

我刚刚开始angular2工作，但据我所知：

import ApplyColor=>您不能删除它，编译器需要知道引用了哪个类

指令：[ApplyColor]=>这意味着您将在模板（app/components/mycomponenturl.html）中使用选择器（您在ApplyColor.ts中定义的选择器）。只需知道组件在视图中的位置即可

new ApplyColor=>您正在自己创建对象，它不会被注入。 要注入组件

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

  ngAfterViewInit() {

    this.color.apply(2);
  }
}
我希望这对你有帮助

是的，我刚才也提到了这个。另外，我在顶部有import语句，
import{ApplyColor}from'/../../../shared/directions/ApplyColor'import{ApplyColor}from'/../../../shared/directions/ApplyColor'你能提供更多细节吗？我更新了我的答案，为最后一个选项提供了更多细节。请随时告诉我这是否适合你。非常感谢。因此，基本上，共享
指令是个坏主意，相反，如果我理解正确，最好使用共享
服务
。不客气！事实上，您不能“共享”指令。您可以使用
@Input
从父组件向子组件提供数据指令。当将两个指令定义为两个不同的组件时，它们不会对应于相同的实例……您能提供更多的细节吗？我更新了我的答案，为最后一个选项提供了更多细节。请随时告诉我这是否适合你。非常感谢。因此，基本上，共享
指令是个坏主意，相反，如果我理解正确，最好使用共享
服务
。不客气！事实上，您不能“共享”指令。您可以使用
@Input
从父组件向子组件提供数据指令。当将两个指令定义为两个不同的组件时，它们不会对应于相同的实例……这样，您必须将sharedservice与单个共享实例一起使用。@micronyks我想这是其中一个答案中提到的。有关于这方面的文章吗？这样你就必须使用sharedservice和单实例共享。@micronyks我想这是其中一个答案中提到的。有这方面的文章吗？