我正在使用Angular 2和Nativescript构建一个移动应用程序。我的当前设置包含我的HomeComponent
,其中包含一个DockComponent
。该DockComponent
然而,渲染和工作得很好,我现在想抽象出每个被告席上的四个按钮,所以我创建了一个LoginComponent
,并试图包括在我的DockComponent,但它没有显示,请参见下文-我有什么做错了吗?
我认为通过引用组件选择器并导入组件并将其添加到父组件的providers数组中,它将起作用吗?
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 {
}
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;
}
}
<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></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>
尝试更改:
providers: [Login]
到:
directives: [Login]
providers
似乎无效。要允许模板访问子组件,您需要将其定义为directive
。请注意,这是一个数组,因此可以在此处定义多个组件。更多细节
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句