如何使用ionic2制作自定义元素组件？

我定义了一个登录按钮组件是这样的：如何使用ionic2制作自定义元素组件？

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

@Component({ 
    selector: 'login-button', 
    template: 
    `<ion-buttons end> 
     <button ion-button round (click)="openLogin()"> 
     Login 
     <ion-icon name="arrow-up"></ion-icon> 
     </button> 
    </ion-buttons> 
    <ng-content></ng-content> 
    ` 
}) 

export class LoginButton { 

    constructor() { 
    console.log('Hello LoginButton'); 
    } 
}

注册它作为app.module.ts供应商，然后在HTML文件中使用它：

<ion-content padding> 
</ion-content> 
<ion-footer> 
    <ion-navbar> 
    <button ion-button icon-only menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title> 
     Fragen 
    </ion-title> 

    <login-button></login-button> 
    </ion-navbar> 
</ion-footer>

没有错误消息。构造函数被调用，但模板没有填充到元素中。显然缺少一个步骤。哪一个？

来源

2016-11-24 Michael

无需将其注册为provider，将其注册为declarations和entryComponents。 <login-button></login-button>（无需显式导入）

来源

2016-11-24 12:25:30 Ivaro18

然后，浏览器，我得到的控制台上：

然后按钮可以与selector显示“NO提供商LoginButton” – Michael

嗯等待我只是检查我的代码，我在'NgModule'的'declarations'和'entryComponents'中声明了'LoginButton'。在使用页面上没有导入声明，只是使用选择器标签 – Ivaro18

最后一件事是它。我将它导入到使用的页面中。把它拿走就行了。我也把LoginButton放到提供者列表中，这使得邮件“没有LoginButton的提供者”消失;-) – Michael

如何使用ionic2制作自定义元素组件？

回答

相关问题