Question

我的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 {

    }

要在ApplyColor

中实例化SomeComponent

导入ApplyColor
添加到directives: [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？

Answer 1

指令实例由Angular2管理。这意味着您只需将其指定到$sql="select name from user where email='$email'"; $stmt = $conn->prepare($sql); if ($stmt->rowcount() = 0) { $sql = "INSERT INTO users (name, email, password) VALUES (:name,:email, :password)"; $stmt = $conn->prepare($sql); $stmt->bindValue(':name', $_POST['name']); $stmt->bindValue(':email', $_POST['email']); $stmt->bindValue(':password', password_hash($_POST['password'], PASSWORD_BCRYPT)); } else { $msg="Email allrady exist"; }属性中。因此，如果directives是指令，只需将其添加到ApplyColor属性中。

如果directives不是指令，则可以使用ApplyColor显式实例化到子组件的提供中。

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

定义服务
```
SomeComponent
```

引导服务

export class SharedService {
  color:ApplyColor;
}

从bootstrap(AppComponent, [ SharedService ]);
设置color
```
AppComponent
```
从@Component({ (...) }) export class AppComponent { constructor(private service:SharedService) { var color = new ApplyColor(); this.service.color = color; } }
获取color
```
SomeComponent
```

Answer 2

我刚刚开始使用angular2但是我能理解：

import ApplyColor =＆gt;你不能删除它，编译器需要知道你引用哪个类

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

new ApplyColor =＆gt;你自己创造了这个对象，它没有被注入。要注入您的组件，

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

  ngAfterViewInit() {

    this.color.apply(2);
  }
}

我希望它对你有帮助吗？

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

2 个答案: