组件中的Angular 2组件不显示？答案

【问题标题】：Angular 2 Component in a component not displaying?组件中的Angular 2组件不显示？
【发布时间】：2016-10-06 06:36:23
【问题描述】：

我正在使用 Angular 2 和 Nativescript 构建一个移动应用程序。我的当前设置有我的HomeComponent，其中包含DockComponent。 DockComponent 渲染和工作正常，但是，我现在想抽象出 Dock 中的四个按钮中的每一个，所以我创建了一个 LoginComponent 并尝试将其包含在我的 DockComponent 中，但它没有显示，见下文 - 我做错了什么？

我认为通过引用组件选择器并导入组件并将其添加到父组件的 providers 数组中，它会起作用吗？

Dock.Component.ts：

import {Component, OnInit} from "@angular/core";
import {Login} from "../Login/login.component";

@Component({
    selector: "dock",
    templateUrl: `Components/Dock/dock.html`,
    styleUrls: ["Components/Dock/dock.css"],
    providers: [Login]
})

export class Dock implements OnInit {

}

Login.Component.ts：

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

@Component({
    selector: "login",
    templateUrl: `Components/Dock/Login/login.html`,
    styleUrls: ["Components/Dock/Login/login.css"],
    providers: []
})

export class Login implements OnInit {

    page: Page;
    ngOnInit() {
        this.page = <Page>topmost().currentPage;
    }
}

Dock.html：

<FAB row="8" col="0" icon="res://help" class="fab-button help" rippleColor="#f1f1f1" (tap)="fabTap()"></FAB>
<FAB row="8" col="1" class="fab-button bluetooth" icon="res://bluetoothg" rippleColor="#f1f1f1" (tap)="fabTap()"></FAB>
<login></login>
<FAB row="8" col="3" icon="res://plus" class="fab-button" id="add" rippleColor="#f1f1f1" (tap)="bluetoothAdd()"></FAB>
<ActivityIndicator row="8" col="3" busy="{{ isScanning }}" id="ActivityIndicator"></ActivityIndicator>

login.html:

（这是从<login></login> 现在在dock.html 文件中的位置进行处理和粘贴的 - 它工作正常）

<FAB row="8" col="2" icon="res://facebook" class="fab-button" id="facebook" rippleColor="#f1f1f1" (tap)="login('Facebook')"></FAB>
<FAB row="8" col="2" icon="res://google" class="fab-button" id="google" rippleColor="#f1f1f1" (tap)="login('Google')"></FAB>
<FAB row="8" col="2" icon="res://amazon" class="fab-button" id="amazon" rippleColor="#f1f1f1" (tap)="login('amazon')"></FAB>
<FAB row="8" col="2" icon="res://key" class="fab-button login" rippleColor="#f1f1f1" (tap)="socialClick()"></FAB>

【问题讨论】：

标签： angularjs typescript angular nativescript

【解决方案1】：

尝试改变：

providers: [Login]

收件人：

directives: [Login]

providers 似乎无效。要允许模板访问子组件，您需要将其定义为directive。请注意，这是一个数组，因此可以在此处定义多个组件。 More details

【讨论】：