Question

我有这个组件：

import { Component } from '@angular/core';
    @Component({
      selector: 'char-gen',
      template: '<div class="box" id="chargenApp">{{title}}</div>'
    })

    export class CharGenComponent {
      title = 'Character Creator';
    }

我在这一个内部打电话：

import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: '<div class="box" id="appBox"><h1>{{title}}</h1><div class="divider"></div></div><div class="footer">{{copyright}}</div>'
    })

    export class AppComponent {
      title = 'Order Of The Mouse: Phase 2 -- Operation Dovecot';
      copyright = 'Copyright © Sassafras Associated Ltd 2016'
    }

以这种方式：

<my-app>Loading Order Of The Mouse
<char-gen>... [Character Generator Loading]</char-gen></my-app>

但是<chargen>组件没有出现（指令中的占位符文本有，但实际的组件模板没有实例化）。但是，当我在没有嵌套的情况下调用<char-gen>时，就像这样：

 <my-app>Loading Order Of The Mouse</my-app>
 <char-gen>... [Character Generator Loading]</char-gen>

显示罚款。我该怎么做才能解决这个问题？我甚至不确定我是否可以通过这种方式进行嵌套，但据说这是可能的，所以我想知道如何实现它以便它适用于这种情况。

Answer 1

您需要告诉您的my-app组件您的其他组件是否存在：

import { CharGenComponent} from './char-gen.component';

@Component({
  selector: 'my-app',
  template: ...,
  directives: [CharGenComponent]
})

您可能需要修改CharGenComponent的路径以反映您的文件结构。

此Angular 2 Tutorial chapter提供了有关使您的组件协同工作的更多信息。

Answer 2

您应该先在文件中导入 chargen 组件   chargen.ts（假设它们与AppComponent位于同一目录中）

您还应该使用选择器 'char-gen'
添加一个元素
在 AppComponent
的模板旁边

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

@Component({
  selector: 'my-app',    
    template: '<div class="box" id="appBox"><h1>{{title}}</h1><div class="divider"></div></div><div class="footer">{{copyright}}</div>
    <char-gen></char-gen>',
    directives: [CharGenComponent]
})

 export class AppComponent {
      title = 'Order Of The Mouse: Phase 2 -- Operation Dovecot';
      copyright = 'Copyright © Sassafras Associated Ltd 2016'
    }

嵌套在Angular2

2 个答案: