其他组件内的Angular 2组件答案

【问题标题】：Angular 2 component inside other component其他组件内的Angular 2组件
【发布时间】：2016-06-19 02:26:50
【问题描述】：

创建一个 RPG 角色创建者。

我有一个 NewCharacterComponent，我正在尝试在其中实现一个 DieInputComponent。 NewCharacterComponent 从 AppComponent 路由。重要的sn-ps代码如下。

我遇到的问题是我没有让 DieInputComponent 在 NewCharacterComponent 中加载。当我破坏 DieInputComponent 代码时，控制台中不会抛出任何错误，因此该错误很可能是我没有成功导入 DieInputComponent 但我不知道出了什么问题。

new-character.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';

import { DieInputComponent } from './die-input.component';

@Component({
  selector: 'core-worlds',
  templateUrl: 'app/new-character.component.html',
  styleUrls: ['app/new-character.component.css'],
})

export class NewCharacterComponent {
  constructor() { }
}

new-character.component.html

<h2>New Character</h2>
<die-input></die-input>

die-input.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'die-input',
    templateUrl: 'app/die-input.component.html',
    styleUrls: ['app/die-input.component.css'],
})

export class DieInputComponent {
    constructor() { }
}

die-input.component.html

<input type="number" placeholder="1d4"></input>

【问题讨论】：

标签： angular angular2-components

【解决方案1】：

为了让您的die-input 组件被识别，您需要通过传递给@Component 装饰器的配置对象中的directives 选项通知Angular 它的存在：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';

import { DieInputComponent } from './die-input.component';

@Component({
  selector: 'core-worlds',
  templateUrl: 'app/new-character.component.html',
  styleUrls: ['app/new-character.component.css'],
  directives: [ DieInputComponent ] //<<<< Where the magic happens
})

export class NewCharacterComponent {
  constructor() { }
}

【讨论】：

太棒了，这行得通。我已经完成了《英雄之旅》教程，但我认为我并没有真正掌握指令的实际作用。
遗憾的是它现在已被弃用，我们现在必须在我们的模块中使用声明

【解决方案2】：

如果您要经常在多个组件中使用该组件，您也可以在您的main.ts 中提供它。

provide(PLATFORM_DIRECTIVES, {useValue: <ComponentName>, multi: true})

这实际上会将它添加到主指令集合中，以便像内置指令一样访问它。

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { PLATFORM_DIRECTIVES, provide } from '@angular/core';
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { AppComponent } from './app.component';
import { DieInputComponent} from './die-input.component';

bootstrap(AppComponent, [
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    provide(PLATFORM_DIRECTIVES, {useValue: DieInputComponent, multi: true}),
]);

new-character.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';

@Component({
  selector: 'core-worlds',
  templateUrl: 'app/new-character.component.html',
  styleUrls: ['app/new-character.component.css'],
})

export class NewCharacterComponent {
  constructor() { }
}

new-character.component.html

<h2>New Character</h2>
<die-input></die-input>

【讨论】：