Angular 2组件位于其他组件内部 [英] Angular 2 component inside other component
问题描述
创建RPG角色创建者.
Creating an RPG character creator.
我有一个NewCharacterComponent,我正在尝试在其中实现DieInputComponent.NewCharacterComponent从AppComponent路由.重要的代码片段将在下面.
I have a NewCharacterComponent and I am trying to implement a DieInputComponent inside it. The NewCharacterComponent is routed from an AppComponent. Important snippets of the code will be below.
我遇到的问题是我没有让DieInputComponent加载到NewCharacterComponent中.当我中断DieInputComponent代码时,控制台中不会引发任何错误,因此该错误很可能是我没有成功导入DieInputComponent而是我不知道出了什么问题.
The issue I am running into is that I am not getting the DieInputComponent to load within the NewCharacterComponent. When I break the DieInputComponent code no errors are thrown in the console, so the error is likely that I am just not successfully importing the DieInputComponent but I just have no idea what is going wrong.
new-character.component.ts
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
new-character.component.html
<h2>New Character</h2>
<die-input></die-input>
die-input.component.ts
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
die-input.component.html
<input type="number" placeholder="1d4"></input>
推荐答案
为了识别您的 die-input
组件,您需要通过指令
选项:
In order to have your die-input
component recognized, you'll need to inform Angular about its existence, through the directives
option in the configuration object passed to the @Component decorator:
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() { }
}
这篇关于Angular 2组件位于其他组件内部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!