Question

我使用角度cli接口抓取angular2的表面以进行初始化简单项目。

我成功创建项目，但是当我使用ng generate component test添加新组件时组件创建类似

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

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {    
  constructor() { }    
  ngOnInit() {
  }    
}

但让我感到困惑的是，我无法在<test>Loading</test>选择器下渲染任何内容（加载除外），我在渲染app-root后立即将index.html放入

 <app-root>Loading...</app-root>
 <test>Loading ...</test>

test.component.html
<p>
  test works!
</p>

我在这里做错了什么？

更新：主模块知道这个组件导致angularcli自动添加和所有导入

@NgModule({
  declarations: [
    AppComponent, TestComponent
  ],

更新2：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

Answer 1

唯一的原因是你需要引导两个组件，以便在index.html中包含它们。或者，您可以引导应用程序组件并将测试组件包含在应用程序组件中。

答案1：

app.module.ts

  declarations: [
    AppComponent, 
    TestComponent
  ],
bootstrap: [ AppComponent, TestComponent ]

<强> ANSWER2：

  bootstrap: [ AppComponent ]

然后在app组件的模板中包含testcomponent，即<test>

例如：如果以下是app.component.html代码

<h1>app component</h1>

chnage it to

<h1>app component</h1>
<test></test>

包含测试组件

Answer 2

无需杀死我....但您可以尝试删除<app-root></app-root>并仅进行渲染测试，并尝试将“测试”呈现为：*

Answer 3

在深入了解plnkr以及如何设置Angular live示例后，我得到了答案。基本上，@ AJT_82的答案部分正确。

从Angular 2开始，你必须调用Framework，你的哪个选择器是你想要引导的根。此部分由app.module.ts文件中的以下行处理。

  bootstrap: [ AppComponent ]

正如您所看到的，Angular将尝试引导您的AppComponent，这基本上意味着它正在尝试将您的AppComponent加载为index.html内的（可能有更多）根元素。要让Angular查找更多模块，您只需要添加下一个模块。

  bootstrap: [ AppComponent, TestComponent ]

如果您只是引导AppComponent，您也可以将<test></test>标记移动到app.component.html，这基本上会导致相同的结果。

Plnkr

以angular2

3 个答案: