Question

使用angular2-seed app开始使用角度2：https://github.com/angular/angular2-seed。我创建了一个组件，但它不会显示在页面上，该组件位于名为external_components的目录中，与组件处于同一级别：

import {Component} from 'angular2/core';

@Component({
  selector: 'SiteQualification',
  template: '<div>hello service external</div>',
})
export class SiteQualification {

  constructor() {}

  ngOnInit() {

  }

}

这是种子app.ts：

import {Component} from 'angular2/core';
//import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {Home} from './components/home/home';
import {About} from './components/about/about';
import {SiteQualification} from './external_components/sitequalification';
import {RepoBrowser} from './components/repo-browser/repo-browser';

@Component({
    selector: 'seed-app',
    providers: [],
    pipes: [],

    templateUrl: 'app/seed-app.html',
})

export class SeedApp {

    constructor() {
    }

}

在seed-app.html中我有：

<main>
    <siteQualification></siteQualification>
</main>

这是app.ts：

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {SeedApp} from './app/seed-app';


bootstrap(SeedApp, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
])
.catch(err => console.error(err));

还删除了路由器。问题是组件不会显示？我错过了什么？

Answer 1

您需要在使用它们的组件的directives: [...]列表中列出组件和指令：

@Component({
    selector: 'seed-app',
    directives: [SiteQualification],
    ...
})

如何以角度2显示组件？

1 个答案: